如何创建自定义模态叠加

Question

更新： JsFiddle Link here

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

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

**update : **button 'click me' 和所有其他元素在 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>

脚本：

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

});