标签：模态 解决方案 Bootstrap js modal data 属性

 

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