完整的參考菜鳥教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
1.手動開啟與關閉模態框的方法 按鈕開啟與JS函數開啟(2種)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 模態框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>創建模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
按鈕開啟
</button>
<a href="javascript:void(0)" class="btn btn-default" onclick="openMotai()">JS函數開啟</a>
<script type="text/javascript">
function openMotai(){
alert("准備開啟");
$("#myModal1").modal('show'); //手動開啟
alert("准備關閉");
$("#myModal1").modal('hide'); //手動關閉
alert("准備開啟");
$("#myModal1").modal(); //手動開啟
}
</script>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!--關閉符號-->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模態框（Modal）標題
</h4>
</div>
<div class="modal-body">
username:<input type="text" name="" id="" value="" /><br /> password:
<input type="password" name="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
2.有時候我們希望點擊esc或者點擊模態框外部的時候不會關閉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 模態框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>創建模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
按鈕開啟
</button>
<a href="javascript:void(0)" class="btn btn-default" onclick="openMotai()">JS函數開啟</a>
<script type="text/javascript">
function openMotai(){
/*alert("准備開啟");
$("#myModal1").modal('show'); //手動開啟
alert("准備關閉");
$("#myModal1").modal('hide'); //手動關閉
alert("准備開啟");
$("#myModal1").modal(); //手動開啟*/
$("#myModal1").modal({backdrop: 'static', keyboard: false}); //手動開啟
}
</script>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- 關閉符號(叉號) -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模態框（Modal）標題
</h4>
</div>
<div class="modal-body">
username:<input type="text" name="" id="" value="" /><br /> password:
<input type="password" name="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
分析:
$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false});
其中 ，backdrop：’static’指的是點擊背景空白處不被關閉；
keyboard:false指的是觸發鍵盤esc事件時不關閉。
另一種方式是直接在模態框標簽加::
<!-- 模態框黑名單單位添加-->
<div class="modal fade" id="myModal" role="dialog"
data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
參看自鏈接：https://www.cnblogs.com/qlqwjy/p/7491054.html