html弹出模式打开时如何使背景模糊？

Question

当我单击按钮时，会打开一个弹出窗口，因此我希望当弹出模式打开时，背景页面会变得模糊。

<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body" style="max-height:500px;">
            <div class="panel-title text-center" style="width: 99%; padding: 1%;">
                <h1 class="title">Titels</h1>
                <hr style="border: 2px solid;"/>
            </div>

            <div class="table100 ver1 m-b-110">
                <div class="table100-body js-pscroll">
                    <table id="Table" class="display" style="width:100%">
                        <thead>
                        <tr class="row100 head">
                            <th style="text-align: center" class="cell100 column1">id</th>
                            <th style="text-align: center" class="cell100 column1">name</th>
                            <th style="text-align: center" class="cell100 column1">sname</th>
                            <th style="text-align: center" class="cell100 column1">dname</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>


        <div class="modal-footer">
            <button type="button" class="btn btn-danger" id="close" data-dismiss="modal">Close</button>
        </div>

    </div>
</div>

这是我的弹出模式代码，但我不知道如何在打开时使背景模糊。

Answer 1

您还可以使用 before 和 after 伪元素设置 body 的属性。

body:before{
    position:absolute;
    top : 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    content:"";
    pointer-events: none;
    z-index:100;
    opacity: .5

}