标签：.ajax show 3.3 efault abi css 执行 product boot
模态框（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>
标签：.ajax show 3.3 efault abi css 执行 product boot
原文地址：http://www.cnblogs.com/Sea1ee/p/6204721.html
