创建弹出窗口的方法

引言

在本课程中，我不会向经验丰富的布局设计师和CSS专家透露秘密，但是本文对初学者很有用。 在这里，您可以学习如何在整个网站的顶部创建弹出窗口。

通常，此类窗口是在网站上执行某些操作后出现的，例如，用户单击“请求回叫”链接，然后在他前面弹出一个订单。

将PopUp窗口与ajax结合使用非常方便，但这是另一课的主题。

使用PopUp弹出窗口的网络资源开始越来越多。 例如，我们可以为每个人提供熟悉的社交网络。 屏幕截图中的所有多余数据都将被删除。

Vkontakte

脸书

推特

我认为有足够的理由开始研究这个问题：如何使PopUp在您的网站上弹出。

问题陈述（TOR）

您需要在整个站点上创建一个带有调暗屏幕的弹出窗口。

解决方案

方法1

html

<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

的CSS

 *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } 

结果：

他们经常建议使用：

 position:absolute; 

是的，结果相似，但是由于我们已经设置了“调光”块的高度，因此会出现滚动条。 这就是为什么这种方法不适合的原因。

方法二

该方法与方法1根本没有区别，但我发现它更方便。

HTML（不变）

 <div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

的CSS

 *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } 

结果是相似的。

由于属性： 最小高度：100％; 我们的“调光”块已获得屏幕的100％宽度和最小 100％的高度 。

此方法的唯一缺点是Internet Explorer仅从8.0版开始支持此属性。

向Jquery添加魔术

现在添加链接以隐藏/显示我们的弹出窗口。

为此，您需要连接jQuery库和一个小脚本：

 <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){ // PopUp    PopUpHide(); }); //  PopUp function PopUpShow(){ $("#popup1").show(); } //  PopUp function PopUpHide(){ $("#popup1").hide(); } </script> 

您还需要更新HTML：

 <div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div> 

结果

现在，当页面加载时，“弹出窗口”弹出窗口将消失。

如果我们单击“显示弹出窗口”链接，将出现一个弹出窗口。 如果单击链接“隐藏弹出窗口”，则弹出窗口将再次消失。

结果可以在这里看到： http : //jsfiddle.net/p7NbX/15/