Question

我想创建一个全屏覆盖窗口，就像点击此演示中的一个投资组合项目时弹出的窗口（http://demo.themevan.com/simplekey/）。不过，我对如何实现它完全无能为力。

我可以有一个固定的div，其中100％的高度\宽度保持隐藏或零不透明度，然后在用户点击按钮时显示，如下所示：

<script>
$('.open_single_project').click(function(e){
    $('.single_project_modal_window').show().animate({
        opacity: 1
        }, 300, function() {
    });
});

但这是最好的方法吗？你知道任何可以帮助我的插件吗？提前感谢大家！

Answer 1

以下是我处理此问题的方法：

HTML：

<body>
    <div id="divBlockEntirePage" style="display:none;"></div>
    ....

CSS：

#divBlockEntirePage
{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.75);
    top: 0;
    left: 0;
    z-index: 9999;
}

jQuery的：

$(document).ready(function(){
    $('#divBlockEntirePage').show();
});

Answer 2

这通常被称为“模态窗口”（或者有时候是一个流行的早期Javascript模式窗口实现之后的“灯箱”）。通常这些只占用屏幕的一部分而不是全部，但是在全屏模式中，几乎可以在任何常见的模态窗口插件或脚本中进行简单的调整。

根据你想要做什么，有几十个，但几乎任何一个都适合全屏覆盖（你只需要调整JS选项和CSS）。我通常使用多功能的Fancybox 2 jQuery插件，但也有更多的轻量级插件，以及不依赖于jQuery的实现。

在Wordpress中创建一个全屏覆盖窗口

2 个答案: