模態框（Modal）是BootStrap中很棒的一個插件。可以去BootStrap菜鳥驛站里面看看。
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。
這里記錄的是自己手動調用模態框而不會使用自動的，自己手動的可以做很多的處理，如：添加數據，修改數據，顯示數據等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 模態框（Modal）插件</title>
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> //樣式必須有，可以在這個地址下載
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> //Jquery庫，建議高一點
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> //bootstrap庫
</head>
<body>
<h2>創建模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button id="view">自己手動調用莫態</button> //自己手動調用
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> //屬性data-toggle和data-target就是觸發模態框的屬性
開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" 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" id="hh">
在這里添加一些文本 （這里就是我們可以做處理的位子）
</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>
//自己手動調用 注意兩個事件 模態框顯示之前，隱藏時發生 這兩個事件
//主要邏輯： 模態框在顯示之前把需要操作的類容加載到模態框中， 隱藏時清空模態框
<script>
$(function(){
$("#myModal").modal({ backdrop: "static", keyboard: false });
$("#myModal").modal("hide"); //這個需要最后寫
$("#myModal").on("hidden.bs.modal", function () {
$(this).removeData("modal"); //清除數據 當模態框對用戶隱藏時發生
$("#view").click(function(){
$("#myModal1").modal("show"); //顯示模態框
});
//模態框顯示之前需要做什么在里面寫就行
$("#myModal").on("show.bs.modal", function () {
//例如：異步去加載需要修改的信息
$.ajax({
type: "get",
url: "@Url.Action("EditProductType")",
data: { id: EditTypeID },
success: function (data) {
$("#hh").html(data);
},
error:function(){
alert("失敗了");
}
});
});
});
}）
</script>