2

更新： JsFiddle 链接在这里

我有一个隐藏的 div 。我在一个事件中显示它，我正在使用Jquery Flippy 插件在它打开时旋转这个 div（作为弹出窗口）。我只想在弹出窗口显示时为背景制作模态叠加。意味着在弹出窗口消失之前，没有人可以在后台单击。不能使用 jquery 对话框。

背景应该是模糊的，并且背景上没有发生任何事件。但是当弹出 div 消失时，一切都应该正常工作。如果您需要，请询问任何澄清。谢谢！

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

4

2 回答 2

2

添加一个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.

于 2013-08-26T07:09:15.243 回答
1

您可以创建一个模态 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>

脚本：

$(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();

});
于 2013-08-26T07:12:47.490 回答