javascript - 如何创建自定义模态叠加

Question

Updated : JsFiddle Link here

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

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

**update : **button 'click me' and all other elements should not be clicked when div is open.<>

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即可。