Bootstrap3 模态对话框的调用方式

最新推荐文章于 2021-05-09 21:34:54 发布

ixygj197875

最新推荐文章于 2021-05-09 21:34:54 发布

阅读量880

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap3实用教程文章标签： Bootstrap Bootstrap3 Bootstrap3 模态对话框的调用方式

本文链接：https://blog.csdn.net/ixygj197875/article/details/90576739

Bootstrap3实用教程专栏收录该内容

173 篇文章

订阅专栏

本文介绍了Bootstrap3模态对话框的调用方式，可通过data属性或JavaScript让模态框动态显示或隐藏。data属性调用无需编写JS代码，要设置data-toggle和data-target属性；JavaScript调用只需一行代码，通过元素id调用，为便于获取点击事件，按钮最好添加id属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模态对话框的调用方式

可以通过 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 属性。如：


<a data-toggle="modal" href="#myModal">Launch demo modal</a>

<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 上开源。