0

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

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

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

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

4

2 回答 2

0

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

那里有几十个，具体取决于您想要做什么，但几乎所有这些都适合全屏覆盖（您只需要调整 JS 选项和 CSS）。我通常为此使用通用的Fancybox 2 jQuery 插件，但也有更多的轻量级插件可用，以及不依赖于 jQuery 的实现。

于 2013-07-25T20:47:30.380 回答
0

以下是我类似处理的方式：

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();
});
于 2013-07-25T20:34:08.783 回答