bootstrap弹出层modal-dialog使用方法

作者: 傻猫    分类: 黑科技    发布时间: 12-25 00:58    浏览次数: 370     无留言

通常不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal" 属性,或者 data-target="#foo" 属性,再或者 href="#foo" 属性,用于指向被控制的模态框。 通过JavaScript调用modal ------------------- 通常只需一行 JavaScript 代码,即可通过元素的 id myModal 调用模态框: $('#myModal').modal(options) ![javacript参数.png][2] javacript调用示例 ------------- 1.将页面中的某块内容作为模态框激活。接受可选参数 object。 $('#myModal').modal({ keyboard: false }) 2.手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。 $('#myModal').modal('toggle') 3.手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。 $('#myModal').modal('show') 4.手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。 $('#myModal').modal('hide') 5.更新模态框,在模态框动态添加或删除内容时: $('#myModal').modal('handleUpdate') 绑定事件 ---- Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。 ![绑定事件.png][3] $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) [1]: https://samool.com/usr/uploads/2019/12/2521725220.jpg [2]: https://samool.com/usr/uploads/2019/12/806715974.png [3]: https://samool.com/usr/uploads/2019/12/375540021.png
Tags: bootstrap, 弹窗口

添加新评论