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

【自定义模态框】

<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');

猜你喜欢

转载自blog.csdn.net/weixin_42547014/article/details/109445597