使用 Javascript 调用模态

Question

我正在尝试使用 Foundation Reveal 插件来触发带有 javascript 的模态，以便出现“onsubmit”模态。

我正在使用隐藏的 iframe 将表单的内容发送到 Mailchimp，而不会将页面重定向到 Mailchimp 表单。

我还使用了一个验证脚本（在 JSfiddle 的 Js 顶部注明），我认为它是我答案的关键，但我一直没能找到它。

Javascript 的其余部分在 JSfiddle 中，因为它只是reveal.js 代码。

如果您在 Foundation 中找不到 Reveal.js，该站点是 here

JSFiddle

HTML：

<form action="http://Verseux.us3.list-manage2.com/subscribe/post" id="myform"   class="myform" method="POST" name="myform" target="hidden-form">
<div class="row" id="form">
  <div class="small-11 medium-8 large-7 small-centered columns">
      <div class="form-field columns">
        <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
        <input type="hidden" name="id" value="3674d50bfa">
        <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
      </div>
      <div class="form-button columns">
        <input class="button postfix" data-reveal-id="myModal" data-animation="fade" type="submit" name="submit" value="Sign Up">
        <input class="button postfix1" data-reveal-id="myModal" data-animation="fade" type="submit" name="submit" value="Go">
      </div>
    </div>
</div>
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>  

Javascript：

/* FOR jQuery WITH THE BUTTON I THINK IT IS EITHER THIS ------------ */


$("#modalLauncher").click(function (e) {
$('#myModal').foundation('reveal', 'open');
});


/* OR THIS ---------------*/

$('a.reveal-modal').trigger('onsubmit');




/*VALIDATION SCRIPT -- I think this is what can help me ----------------------------- */
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 5
            },
        },
        submitHandler: function (form) { 
            $('#myModal').foundation('reveal', 'open'); /* My attempt at deploying the modal so far */
            return false; 

        },
        messages:{ email: "please enter valid email"}

    });
})

Answer 1

你有你的小提琴

$('a[data-reveal-id]').live('click', function(e) {
        e.preventDefault();
        var modalLocation = $(this).attr('data-reveal-id');
        $('#'+modalLocation).reveal($(this).data());
    });

改成

$('input[data-reveal-id]').live('click', function(e) {
        e.preventDefault();
        var modalLocation = $(this).attr('data-reveal-id');
        $('#'+modalLocation).reveal($(this).data());
    });

似乎有效