SublimeText
首先在HTML5页面中添加压缩好后的bootstrap.min.css样式文件，如下图所示，在大多数的项目中一般都会运用压缩版的CSS文件
然后在页面中继续添加bootstrap.min.js，如下图所示，这个文件中定义好了很多常用的脚本效果
然后我们在body区域定义button按钮，点击这个按钮可以出发模态框的弹出，如下图所示
接下来我们来定义模态框的具体样式，如下图所示，通过调用modal样式来声明模态框。注意模态框的内容将会放在modal-content样式里
然后我们就定义模态框的标题，正文和底部内容，如下图所示，它们的样式分别是modal-header，modal-body和modal-footer
最后，我们在脚本标签script里通过调用modal方法来直接让模态框弹出，如下图所示
运行页面程序以后，如下图所示的模态框就会呈现在浏览器中，它看起来是不是比JavaScript的弹出框更加的漂亮
bootstrap模态框 确认框/提示框 的常用实现
HTML 代码：
<!-- 模态框（Modal）弹出层 -START --><!-- 万能确认框 --><div class="modal fade" id="delcfmModel"> <div class="modal-dialog"> <div class="modal-content message_align"> <div class="modal-header"> <button type="button" class="Close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">确认信息</h4> </div> <div class="modal-body"> <p id="delcfmMsg">您确认要删除吗？</p> </div> <div class="modal-footer"> <input type="hidden" id="submitUrl"/> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <a onclick="urlSubmit()" class="btn btn-success" data-dismiss="modal">确定</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --><!-- 提示框 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modalTitle" style="text-align: center;"> 提示框 </h4> </div> <div id="modalText" class="modal-body"> 提示内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div><!-- 模态框（Modal）弹出层 -END -->
javascript 函数
/** * @Description: 同意或拒绝审核确认框 * @Author: 张颖辉(yh) * @Date: 2018/9/14 16:18 * @param: * @return: * @Version: 1.0 */ function auditSubmit(agree) { //提交审核结果url var submitUrl = "companyLoanEx/submitAudit.html?agree=" agree; $('#submitUrl').val(submitUrl);//给会话中的隐藏属性URL赋值 var flag = ""; if (agree) { flag = " [通过] " } else { flag = " [拒绝] " } $('#delcfmMsg').html("您确认审核" flag "吗?") $('#delcfmModel').modal(); } /** * @Description: 提交信息确认框 * @Author: 张颖辉(yh) * @Date: 2018/7/4 18:20 * @param: * @return: * @Version: 1.0 */ function urlSubmit() { var submitUrl = $.trim($("#submitUrl").val());//获取会话中的隐藏属性URL // window.location.href = submitUrl; alert("使用ajax异步调用提交审核 url=" submitUrl) } /** * @Description: 提示框 * @Author: 张颖辉(yh) * @Date: 2018/9/14 16:14 * @param: * @return: * @Version: 1.0 */ var showModal = function (title, text) { $("#modalTitle").html(title); $("#modalText").html(text); $("#myModal").modal(); }
