bootstrap的弹出窗体操作

最新推荐文章于 2024-04-21 13:20:11 发布

lxyforever5

最新推荐文章于 2024-04-21 13:20:11 发布

阅读量2.4k

点赞数 1

分类专栏：前端 js 文章标签： jquery 前端框架 bootstrap

本文链接：https://blog.csdn.net/lxyforever5/article/details/130085345

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

该文章演示了如何使用HTML的a标签配合JavaScript和jQuery来创建点击后弹出窗口的效果。点击事件触发openWindow()函数，通过$(#dlgAddOpenWindow).modal(show)显示模态对话框。弹窗内容包含标题、主体和操作按钮，同时在弹窗显示和隐藏时处理数据的传递和操作。

摘要由CSDN通过智能技术生成

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