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：
jquery弹出div窗口<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 调⽤模态框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。