使用javascript和css弹出窗口

Pop up window using javascript and css

本文关键字：窗口 css javascript 使用      更新时间：2023-09-26

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

<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>

考虑使用jquery插件，如jquery Tool的覆盖。

您只需要将div放在具有绝对位置的everthing之上，其z索引高达9999。

你可以看看这里http://www.w3schools.com/cssref/pr_pos_z-index.asp或者使用堪察加提到的一些插件。

如果你想像你在评论中提到的那样为IOS开发，你可以查看JQuery Mobile。

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

创建模糊很有挑战性。Webkit在他们的睡衣中引入了CSS模糊效果http://bit.ly/AuBZJO

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

或者你可以向风车倾斜，然后用画布拼凑一些东西，首先进行屏幕捕捉

你能拿一个"；截屏"；使用Canvas？

然后模糊生成的图像

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

相关文章：