Question

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

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

我也在使用验证脚本（在JSfiddle的Js顶部注明），我认为这是我答案的关键，但我一直无法找到它。

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

如果您在基金会找不到Reveal.js，该网站为here

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());
    });

似乎有用

使用Javascript调用模态

1 个答案: