Bootstrap3实用教程
4.3.4 模态对话框的调用方式
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

模态对话框的尺寸

动态模态对话框

静态模态对话框

模态对话框的调用方式

可以通过 data 属性或 JavaScript,让模态框动态显示或隐藏。Bootstrap会为<body>元素添加.modal-open类来覆盖页面默认的滚动行为,并且还会自动生成一个.modal-backdrop元素,用于在模态框的外面提供一个可点击区域,点击该区域,就会关闭模态框。

1、data属性调用

使用 data 属性调用方式,无需编写 JavaScript 代码就可激活模态框。使用 data 属性调用时,要给触发模态框打开的元素设置两个属性,一个是 data-toggle 属性,另一个是 data-target 属性。

data-toggle 属性定义要触发的插件类型,对于模态对话框,它的值必须设置为 modal;data-target 属性定义触发对象,它的值是一个选择器,该选择器指向要显示或隐藏的模态框对象。

如果触发元素为按钮或其他元素,则要通过data-target 属性定义触发对象,并将 data-target 属性的值设置为模态对话框的 id 值。如,以下代码表示点击按钮会打开 id="myModal" 的模态对话框:

<!-- 触发按钮 -->
<button data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- 模态对话框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  ...
</div>

如果触发元素为超链接,则既可以使用 data-target 属性,也可以使用 href 属性来定义触发对象。但为了统一,建议还是使用 data-target 属性。如:

<!-- 使用 href 属性 -->
<a data-toggle="modal" href="#myModal">Launch demo modal</a>
<!-- 使用 data-target 属性 -->
<a data-toggle="modal" data-target="#myModal">Launch demo modal</a>

2、JavaScript调用

使用JavaScript调用模态对话框非常简单,只需一行JavaScript代码,即通过元素的 id调用模态框:

$('#myModal').modal()

如果使用JavaScript调用,就不必为按钮添加 data-toggle 和 data-target 属性。不过,为了便于通过 jQuery 获取按钮点击事件,最好为它添加 id 属性。如:

<button id="#btnModal">Launch demo modal</button>

如果希望在用户点击 id="btnModal" 的按钮时,调用 id="myModal" 的模态对话框。代码可以这样写:

$(function() {
  $("#btnModal").click(function(){
    $('#myModal').modal();
  });
});

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验