首页 前端知识 bootstrap的弹出窗体操作

bootstrap的弹出窗体操作

2024-03-20 11:03:35 前端知识 前端哥 848 70 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3952.html
标签
bootstrap
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!