使用 javascript 和 css 弹出窗口答案

【问题标题】：Pop up window using javascript and css使用 javascript 和 css 弹出窗口
【发布时间】：2012-02-07 12:00:17
【问题描述】：

我的应用需要在单击按钮时生成一个弹出窗口。该应用程序专门用于 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 中的代码对我来说很好。

【问题讨论】：

请don't add signatures or taglines to your posts。

标签： javascript css

【解决方案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>

【讨论】：

非常感谢。它按预期工作，除了当“位置：绝对”时，即使弹出窗口内的关闭按钮也不会关闭弹出窗口，并且当它的“相对”外部任何按钮处于活动状态时。关于如何处理的任何想法？
隐藏主容器 id="popup" 或者如果这不起作用隐藏 id="popup" 的孩子，那么它肯定会起作用

【解决方案2】：

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

创建模糊是一项挑战。 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

【讨论】：

您能告诉我如何禁用背景并创建模态灯箱吗？这对我来说是一个好的开始。

【解决方案3】：

如果您正在为 IOS 开发，正如您在其中一个 cmets 中提到的，您可以查看 JQuery Mobile。

【讨论】：

jquery mobile 有自己的css。在使用他们的 css 时，它会使我们使用的 css 无效。因此我们决定坚持使用纯 JavaScript。
@Khush 我不明白，你应该可以用你的自定义 CSS 覆盖他们的 CSS...
不，它没有。 jquery-css 覆盖了我们的应用程序 css，此外，jquery 代码与 ios 开发代码不匹配。我们开发跨平台应用程序，其中相同的代码适用于 android 和 IOS。

【解决方案4】：

您只需将 div 置于绝对位置之上，并将其 z-index 设置为 9999 之类的高值。

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

【讨论】：

【解决方案5】：

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

【讨论】：

jquery 在 IOS 中不受支持。所以我需要一个特定的javascript或css。
你是说野生动物园吗？就像在 iPad/iPhone 中一样？如果是这样，jQuery 肯定是支持的。
我不是说野生动物园。我的应用程序适用于移动设备。所以它在这方面效果很好。