Bootstrap的模态框无法弹出的问题
今天在使用Bootstrap官网所提供的模态框插件时候发现其中的 可选尺寸模态框 无法弹出
在模态框前使用过其他 Bootstrap的js插件,可以正常使用,说明所需依赖js文件已经正常引用
注意:jquery.min.js与bootstrap.min.js文件引入顺序不可颠倒,否则同样无法使用,遇到相同问题的可以先检查此处
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
可以排除js依赖问题,经过测试和对比官网其他源码发现:
向红框内class值添加
<div class="modal fade bs-example-modal-lg"
问题解决
该问题主要原因是:按钮是通过 data-target=".bs-example-modal-lg"这个属性来指向被绑定的模态框,但是模态框的类名中没有bs-example-modal-lg这个值,导致绑定失败,点击按钮模态框无法弹出
模态框插件并不是可以直接使用,需要通过 data 属性或 JavaScript 调用
通过 data 属性:
通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal"
属性,或者 data-target="#foo"
属性,再或者 href="#foo"
属性,用于指向被控制的模态框。
eg:
<button data-toggle="modal" data-target="#btn">点击显示模态框</button><div class="modal fade" tabindex="-1" role="dialog" id="btn"> //
通过给button按钮 data-toggle="modal"和data-target="#foo"
两个属性,以及给模态框一个和按钮的data-target属性值相同的id属性值 来指向被控制的模态框
通过 JavaScript 调用:
$('#btn').modal()
通过元素的 id myModal
调用模态框
标签:模态,解决方案,Bootstrap,js,modal,data,属性 From: https://www.cnblogs.com/-hz01/p/17531828.html