草庐IT

Foundation 模态框

runoob 2023-04-06 原文

Foundation 模态框

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。

注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:

实例

<!-- Trigger the Modal -->
<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>

<!-- The Modal Content -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Heading in Modal.</h2>
  <p>Some text in the modal.</p>
  <p>Some text in the modal.</p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

尝试一下 »

模态框大小

可以在模态框容器上添加以下类来设置模态框的大小：

  • .tiny: 30% 宽度
  • .small: 40% 宽度
  • .medium: 60% 宽度
  • .large: 70% 宽度
  • .xlarge: 95% 宽度
  • .full: 100% 宽度和高度

注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。

实例

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>

尝试一下 »

内嵌模态框

你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：

实例

<!-- Trigger the modal -->
<a href="#" class="button" data-reveal-id="myModal">Click To Open Modal</a>

<!-- The First Modal -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>First Modal</h2>
  <p>Some text..</p>
  <p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- The Second Modal -->
<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>Tada! Second Modal</h2>
  <p>Some text..</p>
  <a class="close-reveal-modal">&times;</a>
</div>

尝试一下 »

第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性：

实例

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">

尝试一下 »
Foundation模态spanclasshighELE

有关Foundation 模态框的更多相关文章

  1. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性？ - 2

    大家好，我正在开发一个新的Rails应用程序，我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css，还有它的视觉效果；p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的，如果您对app/assets/stylesheets/

  2. ruby - Capybara 麻烦填写 JS 模态 - 2

    首先让我确认这不是重复的(因为那里发布的答案没有解决我的问题)。Thispost本质上是我的确切问题:Capybara无法在Stripe模式中找到表单字段来填写它们。这是我的capybara规范:describe'checkout',type::feature,js:truedoit'checksoutcorrectly'dovisit'/'page.shouldhave_content'Amount:$20.00'page.find('#button-two').click_button'PaywithCard'Capybara.within_frame'stripe_checkou

  3. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误，但我不知道如何解决:找不到有效的gem'foundation'(>=0)，原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗？ 最佳答案 如

  4. javascript - 与用户操作交互的模态弹出窗口，如用户设置的最大化、最小化、关闭、调整大小和可拖动 - 2

    我需要与用户操作交互的模态弹出窗口，如下图所示。但是这个模态弹出窗口应该是纯java脚本。严禁使用JQuery或JQuery插件。期待您的来信。提前致谢。 最佳答案 这里我分享一些插件，基本上都是用Jquery和Javascript创建的。无论您在纯JavaScript中寻找什么，都可以使用http://alpha.jspanel.de/media/demos/nojquery/index.php另一个是使用Jquery创建的。是https://lobianijs.com/site/lobipanel#examples使用第一个选项

  5. javascript - 单击时使用纯 JavaScript 隐藏 Bootstrap 模态 - 2

    我正在研究BootstrapPopUpModals。我有2个按钮，分别名为Button1和Button2。&我有2个模态框，分别名为Modal1和Modal2。Note:Button2isinsidetheModal1&Button1isontheWebPage.如果我点击Button1，Modal1应该是打开的&如果我点击Button2是在Modal里面，那么Modal1应该会自动隐藏并且应该显示Modal2。我正在使用jQueryYet做这件事并且它工作正常。$('#button1').click(function(){$('#modal1').modal('hide');$('#

  6. javascript - 我怎样才能在 twitter bootstrap 中只显示一次模态？ - 2

    这是我的代码:$(document).ready(function(){if($.cookie('msg')==0){$('#myModal').modal('show');$.cookie('msg',1);}});在页面加载时模型显示，但当我刷新时它一直显示它应该只显示一次。$.cookie来自https://github.com/carhartl/jquery-cookie更新:这有效:“隐藏”由于某种原因无效$(document).ready(function(){if($.cookie('msg')==null){$('#myModal').modal('show');$.c

  7. javascript - 如何获取模态框jquery UI的输入值 - 2

    {%csrf_token%}如何从以下位置获取EMAIL值:到:从这里开始:functionshowDialog(){$("#dialog-modal").dialog({});} 最佳答案 使用对话框打开时调用的对话框打开事件...所以替换那里的值..$("#dialog-modal").dialog({open:function(event,ui){varboxInput=$("#befor-box").find('input[name="email"]').val();//getthevalue..$("#dialog-mod

  8. javascript - Meteor 的 Iron Router 不关闭模态对话框 - 2

    我正在使用Meteor和IronRouter，并且我有一个模态对话框，当它被关闭时不会隐藏背景。更准确地说，我希望在单击关闭按钮后，ironrouter将重定向到另一个页面。重定向代码确实有效，但背景仍然可见。如果我删除路由线-模式将被关闭，背景也将被关闭。这是模态框的标记:×Areyousure?Thiscannotbeundone.YesNo这是切换模态对话框的按钮:Delete这是确认模式对话框的"is"按钮上的点击事件:'click#confirm-yes-button':function(){Recipes.remove(this._id);$('#confirm

  9. javascript - 无法让 jQuery UI 模态对话框成为模态 - 2

    我无法让jQueryUImodal对话框像在demo中一样工作!考虑这个食谱:Firstopenamodalsomething').dialog({modal:true});returnfalse;">dialogThentrytohoverovermeAndclickme!当对话框处于事件状态时，第二个链接被正确禁用，但第三个链接(onclick)仍然有效!此外，将鼠标悬停在两个链接上时，浏览器的小手会出现。这不像演示...我做错了什么？ 最佳答案 作为Pointy指出，这通常由jQueryUICSS控制。但是可以通过在CSS文件

  10. javascript - 通过 URL 直接链接到打开的模态窗口？ - 2

    我对编码知之甚少，所以希望我的问题措辞正确。我想做的是将一个人链接到另一个网站上的特定模式窗口。在此示例中，我将使用Menards每周广告来展示我想做的事情。我想将某人直接链接到每周传单页面，其中模式窗口已经针对特定产品打开，例如74.99美元的5层货架单元，选中后会打开此窗口(http://i.imgur.com/lntNUpK.png)。这是我想直接链接到某人的窗口。有没有办法修改URL来实现这一点？我所知道的就是如何链接到URL的特定页面，看起来像这样/main/flyer.html?page=5另一件值得一提的事情是，如果您访问提供广告的网站Flipp，它确实允许您直接链接到窗

随机推荐