jquery - 如何打开 Foundation Reveal 模式 javascript

标签 jquery modal-dialog zurb-foundation

我一直在尝试遵循 Foundation 文档,但我真的不知道如何使用 jQuery 打开模式窗口。这是我所拥有的:

Fiddle

HTML:

<a href="#" id="myModal" class="reveal-link">Name</a>

<div id="myModal" class="reveal-modal">
      <a class="close-reveal-modal">&#215;</a>
</div>

jQuery:

$(document).ready(function(){
    $(document).foundation();
    $('a.reveal-link').trigger('click');
    $('a.close-reveal-modal').trigger('click');
 });

谢谢,任何帮助将不胜感激!

最佳答案

您错误地在 <a> 上设置了相同的 ID和<div>标签。

有两种方法可以做到这一点:

  1. 您的模态框的 ID 为“myModal”,因此您应该设置属性 data-reveal-id='myModal'给您<a>标签。相反,您设置了 id="myModal" ,您应该删除它。您正在使用的 JavaScript 应该可以适应此更改。

  2. 更改 <a>标签的 id 为 id="modalLaucher"然后使用:

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

关于jquery - 如何打开 Foundation Reveal 模式 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18132946/

相关文章:

javascript - JQuery 用文本替换表单元素

javascript - 在手机上滚动方向?

javascript - 使用 Zurb Foundation Reveal 插件在页面加载时打开叠加层

jquery - Zurb Foundation Accordion 嵌套在 Accordion 内部

terminal - 语法错误 : File to import not found or unreadable: foundation/common/ratios

jquery - 当文本太长时使用 jQuery 更改字体大小

jquery - 在 jQuery PopUp 上设置计时器

java - 如何使JFrame模态像JOptionPane?

javascript - Bootstrap 模态数据关闭不起作用

html - Foundation 5 Top Bar 全宽,但内部元素包含在网格中