Question

已更新： JsFiddle Link here

我有一个隐藏的div。我在一个事件上显示它，我正在使用Jquery Flippy plugin来打开这个div（作为弹出窗口）。我想在弹出窗口显示时为背景制作模态叠加。意味着没有人可以在背景中点击，直到弹出消失。不能使用jquery对话框。

背景应该模糊，背景上不会发生任何事件。但是当popup div消失时，一切都应该正常。如果你需要请求任何澄清。谢谢！

**更新：**按钮'点击我'，当div打开时，不应点击所有其他元素。<>

Answer 1

添加div class="modalcover"元素作为文档中的最后一个元素，然后创建如下所示的CSS类：

.modalcover {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.0;
    z-index = 10000;
    background-color: #000000;
    display: none;
}

您可能需要将z-index放入页面中的其他zIndex。当您需要封面时，只需设置其display: block。

Answer 2

你可以创建一个位置固定的模态DIV，当弹出窗口显示时显示，当弹出窗口消失时隐藏它

CSS：

<style type="text/css">
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
        display: none;
        z-index: 100; /* play with this param to show the modal behind the popup and above the page content */
    }
</style>

SCRIPT：

$(function() {

    function Modal() {
        this.$el = $('<div class="modal" />');
        $('body').append(this.$el);
        this.$el.on('click', this.preventEvent.bind(this));

        $(window).on('resize', this.resizeModal.bind(this));
    }

    Modal.prototype.show = function() {
        this.$el.css('width', $(window).width() + 'px');
        this.$el.css('height', $(window).height() + 'px');
        this.$el.show();
    }

    Modal.prototype.hide = function() {
        this.$el.hide();
    }

    Modal.prototype.resizeModal = function() {
        this.$el.css('width', $(window).width() + 'px');
        this.$el.css('height', $(window).height() + 'px');
    }

    // prevent background event
    Modal.prototype.preventEvent = function(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    var modal = new Modal();

    // when you are showing your popup - modal.show();
    // when you are hiding your popup - modal.hide();

});

如何创建自定义模态叠加层

2 个答案: