1.以a标签为例,设置为弹窗操作
<a class="btn btn-success btn-role" href="javascript:void(0);"
onclick="openWindow()">
打开弹窗窗口
</a>
2.点击事件后打开窗口,通过show进行打开,dlgAddOpenWindow是需要进行弹窗的标签Id
$("#dlgAddOpenWindow").modal("show");
3.需要弹窗的内容结构
<div class="modal fade" id="dlgAddOpenWindow" 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">弹框的标题</h4>
</div>
<div class="modal-body">弹框的内容</div>
<div class="modal-footer"><!--最尾部的操作按钮-->
<button type="button" class="btn btn-primary" id="btnAddDev">
保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
取消</button>
</div>
</div>
</div>
</div>
4.弹框显现隐藏时会触发的操作(是在父页面进行的操作)
<!--是在父页面进行的操作 -->
$(function(){
//弹框窗口打开的时候触发
$('#dlgAddOpenWindow').on('show.bs.modal', function (event) {
//当前父页面的字段元素获取
var Id= $("#Id").val();
var Name= $("#Name").val();
//将字段值赋给弹出窗体的页面
var modal = $(this);
modal.find('.modal-body input[id=hidId]').attr("value", Id);
modal.find('.modal-body input[id=Name]').attr("value", Name);
});
//弹框窗口消失的时候触发
$('#dlgAddOpenWindow').on('hide.bs.modal', function (e) {
//在此处放关闭窗口时会触发的步骤
});
});