如何去掉bootstrap模态框的遮罩层

1. 什么是Bootstrap模态框的遮罩层？

在Bootstrap中，使用模态框可以方便地实现弹出框效果，遮罩层是模态框的一部分。当模态框弹出时，页面上会出现一层半透明的遮罩层，防止用户在操作模态框时误操作页面。但是，在某些情况下，我们可能需要移除遮罩层，本文将会介绍如何去掉Bootstrap模态框的遮罩层。

2. 如何去掉Bootstrap模态框的遮罩层？

在Bootstrap中，我们可以通过设置“backdrop”参数来控制遮罩层的出现与否，其可选值如下：

static：点击遮罩层不会关闭模态框

true：点击遮罩层会关闭模态框

false：不显示遮罩层

默认情况下，该参数的值为true，即点击遮罩层会关闭模态框。如果我们需要移除遮罩层，可以将该参数的值设置为false或删掉该参数。

下面是一个示例代码，展示如何去掉Bootstrap模态框的遮罩层：

<div class="modal" tabindex="-1" role="dialog" data-backdrop="false">

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

在上述代码中，我们设置了data-backdrop="false"，这样Bootstrap就不会显示遮罩层了。

3.1 更改默认参数的方法

Bootstrap模态框的遮罩层参数可以在全局范围内进行设置。你可以通过更改默认的参数值来避免在模态对话框弹出时出现遮罩层。

下面是如何修改Bootstrap模态框的默认遮罩层值：

<script>

    $(document).ready(function(){
        $.fn.modal.Constructor.DEFAULTS.backdrop = "false";
    });
</script>

在这里，我们将$.fn.modal.Constructor.DEFAULTS.backdrop参数值设置为false。这将在每个模态框中覆盖backdrop参数的默认设置。

3.2 隐藏模态框时显示遮罩层

如果你想在关闭模态对话框时重新显示遮罩层，可以使用jQuery实现。

<script>

    $(document).ready(function(){
        $("#myModal").on('hidden.bs.modal', function(){
            $(".modal-backdrop").show();
        });
    });
</script>

在这里，我们对#myModal模态框使用了hidden.bs.modal事件，并在该事件中显示了.modal-backdrop元素。

4. 总结

本篇文章介绍了如何去掉Bootstrap模态框的遮罩层。我们可以通过全局的方式或者在每个模态框中设置backdrop参数来控制遮罩层的出现与否。如果需要在隐藏模态框时重新显示遮罩层，可以通过使用jquery实现。遮罩层可以起到防止用户误操作页面的作用，但在某些情况下，需要去掉遮罩层。