BootStrap自定义弹出框（模态框）+ 手动控制显示隐藏（点击遮罩不关闭）

卑微猿同学

于 2020-11-02 11:34:12 发布

阅读量984

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_42547014/article/details/109445597

前端框架专栏收录该内容

26 篇文章

订阅专栏

博客介绍了自定义模态框相关内容，包括实现点击遮罩不关闭模态框，以及对模态框显示和隐藏进行手动控制，涉及信息技术中的前端开发知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【自定义模态框】

<div class="modal fade" id="myModalUpload" tabindex="-100" role="dialog" aria-labelledby="myModalLabelUpload"
         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" id="myModalLabelUpload">
                        Excle导入
                    </h4>
                </div>
                <div class="modal-body">
                    <span>【注】:</span>
                    <input type="file" id = "uploadExcleInput" >
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="delete-btn">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

在这里插入图片描述
【点击遮罩不关闭】

data-keyboard="false" data-backdrop="static"

在这里插入图片描述
【手动控制显示隐藏】

//显示
 $('#myModalUpload').modal('show');
//隐藏
 $('#myModalUpload').modal('hide');