可以通过 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 属性。如：
<!-- 使用 href 属性 --><a data-toggle="modal" href="#myModal">Launch demo modal</a><!-- 使用 data-target 属性 --><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 上开源。
