使用 Javascript 调用模态

Posted 2023-03-24

【中文标题】使用 Javascript 调用模态

【英文标题】：Using Javascript to call up a modal

【发布时间】：2014-04-21 09:10:43

【问题描述】：

我正在尝试使用 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"

    );
)

【问题讨论】：

仅供参考：您不需要隐藏的iframe 来向 MailChimp 提交数据。只需使用 MailChimp API：***.com/a/5059391/594235

【参考方案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());
    );

似乎有效