Question

我的应用需要在按钮点击时生成一个弹出窗口。该应用程序专门针对Android和IOS中的移动设备。

我使用此代码收到了同样的信息：

.popup
{
   position:absolute; left:0; top:0; width:132;
   border-style:solid;
   border-width:4;
   border-color:blue;
   background-color:black;
   padding:5px;
   color:white;
   font-family:Arial;
   font-weight:bold;
   font-size:10pt;
   z-index:2;
   visibility:hidden;
}

但我需要的是在弹出窗口打开时背景模糊和禁用。我如何实现这一目标？

使用JavaScript或CSS的代码对我来说很好。

Answer 1

<div id="popup">
    <div style="position:absolute;width:100%;height:100%;z-index:9000;opacity:.5,background-color:#000;"></div>
    <div style="position:absolute;width:400px;height:400px;left:30%;top:20%;z-index:9001;">MY POPUP WINDOW</div>
</div>

Answer 2

考虑使用jquery插件，例如jQuery Tool's overlay。

Answer 3

你只需要将一个div放在上面，其位置绝对值和它的z-index就像9999那样高。

您可以在这里查看http://www.w3schools.com/cssref/pr_pos_z-index.asp或使用kamchatka提到的插件。

Answer 4

如果您正在考虑在其中一条评论中提及的IOS开发，则可以查看JQuery Mobile。

Answer 5

禁用背景或创建模态灯箱非常简单，并在其他评论中介绍。只需确保将焦点设置到新的灯箱窗口，否则使用屏幕阅读器的用户将会丢失。

创造模糊是一项挑战。 Webkit在他们的nightlies中引入了CSS模糊效果 http://bit.ly/AuBZJO

我相信这最终是解决方案。现在我们可以使用RGBA将背景div设置为稍微透明，就像其他评论者所说的那样。

或者你可以在风车上倾斜并使用画布将某些东西拼凑在一起以首先进行屏幕捕获

Can you take a "screenshot" of the page using Canvas?

然后模糊生成的图像

http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

使用javascript和css弹出窗口

5 个答案: