弹出遮罩层

js代码，控制显示隐藏：

<script>
        function ShowModal(eid) {
            $(".modal").show();
            $(".modal-content").show();
        }
        $(function () {
            // modal事件
            var $modal = $('.modal');
            $modal.on('click', function (ev) {
                var $this = $(this);
                $this.hide();
                $(".modal-content").hide();
            });
        });
    </script>

css代码：

.modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            padding-right: 0.733333rem;
            padding-left: 0.733333rem;
            display: none;
            background-color: #919191;
            z-index: 99;
            opacity: 0.5;
        }

        .modal-content {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 65rem;
            height: 50rem;
            padding: 0.706667rem 0.533333rem 0.666667rem;
            text-align: center;
            background-color: #cffaff;
            border-radius: 0.266667rem;
            resize: both;
        }

html代码：

<div class="modal"></div>
    <div class="modal-content" style="z-index: 99; display: none;">
        test
    </div>

 

转载于:https://www.cnblogs.com/xsj1989/p/5242543.html