bootstrap的弹出窗体操作

 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">&amp;times;</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) {
            //在此处放关闭窗口时会触发的步骤
        });
});

代码007普通

打赏 收藏 海报 链接