Magento Modal form

modal.phtml

<?php
/**
 * jQuery Avgrund Modal signup form
 *
 * Template for modal forms used in sign-up of marketing campaigns, promotional
 * activities and other commercial activities which require modal windows to
 * (loosely) enforce registration of information upon users of that application.
 *
 * PHP version 5.4
 *
 * @category TemplateFormModal
 * @package  Agis
 * @author   Rob Jentzema <[email protected]>
 * @license  MIT
 * @link     None
 *
 */

//session variable set on successful post inside controller
$showModal = Mage::getSingleton('core/session')->getIsModal();

if ($showModal || is_null($showModal)) {

?>

    <div id="campaign-participant-modal">

        <img alt="Agis Zorgverzekeringen"
             src="<?php echo $this
                 ->getSkinUrl('images/medium_form_logo.png')?>">

        <h3>Agis Sauna voor Twee actie</h3>
        <h5>Vul uw gegevens in om de actiepagina te bekijken</h5>

        <form method="post"
              id="campaign_participant_signup_form"
              action="<?php echo $this->getUrl('marketing/participant/createPost')?>">

            <input name="form_key" type="hidden"
                   value="<?php echo
                   Mage::getSingleton('core/session')->getFormKey() ?>"/>


            <ul class="fields_list">
                <li>
                    <span>
                        <label for="external_reference">
                            Uw Agis klantnummer
                        </label>
                    </span>
                    <span>
                        <input id="external_reference"
                               name="external_reference"
                               autofocus="autofocus"
                               type="text">
                    </span>
                </li>
                <li>
                    <span>
                        <label for="email">
                            Uw e-mailadres
                        </label>
                    </span>
                    <span>
                        <input id="email"
                               name="email"
                               type="email">
                    </span>
                </li>
                <li>
                    <input type="submit" value="Verzenden">
                </li>
            </ul>
        </form>
    </div>

    <script type="text/javascript">

        $j = jQuery.noConflict();

        /**
         * Client side validation
         *
         * Using jQuery Validate library pulled in with Bower
         */
        $j("#campaign_participant_signup_form").validate({
                  rules: {
                      external_reference: {
                          required: true,
                          digits: true,
                          minlength: 9,
                          maxlength: 9
                      }, email: {
                          required: true,
                          email: true,
                          minlength: 5,
                          maxlength: 35
                      }
                  }

                  // todo: ajax
                  //        ,
                  //        submitHandler: function (form) {
                  //            $j(form).ajaxSubmit();
                  //        }

                  });


        $j(function () {
            $j(document).avgrund({
                             height: '450'
                             , width: '600'
                             , openOnEvent: false
                             , holderClass: 'custom'
                             , closeByEscape: false // make true modal, no escape button to close
                             , closeByDocument: false // disallow click outside model to close
                             , showClose: false // and no close button/text either
                             , onBlurContainer: '.page'
                             , template: $j('#campaign-participant-modal')
                                 });
        });

    </script>

<?php
}
?>