Javascript/HTML/CSS 弹出窗口答案

【问题标题】：Javascript/HTML/CSS popupJavascript/HTML/CSS 弹出窗口
【发布时间】：2013-07-12 07:51:25
【问题描述】：

我正在使用隐藏的 DIV 处理弹出窗口并使用 window.onload 加载它。除此之外，我还加载了一个带有覆盖 CSS 样式的空 DIV（用半透明黑色填充弹出窗口后面的背景）。最后，在弹出窗口的右上角有一个关闭按钮。

我浏览了 SA 和几个论坛（因为这是我第一次用 JS 做类似的事情）并且从那里获得了大部分代码。然而，当把它们加在一起时，有些东西让它无法工作，我已经盯着这个看了一天，也许我只是错过了一些非常明显的东西？

这是代码：

JS：

<script type="text/javascript">
function show_popup()
{
  document.getElementById('popup').style.display = 'block'; 
}
window.onload = show_popup;
</script>

<script language="text/javascript">
window.onload = function() {
   $('#overlay-back').fadeIn(500);
}
</script>

<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>

HTML：

<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>

CSS：

    #popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
    #overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
    .close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}

提前非常感谢！

【问题讨论】：

您是否在 head 部分中包含了 jquery 框架？

标签： javascript html css popup overlay

【解决方案1】：

你必须包含 jquery 才能工作

<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>
      // you can use just jquery for this
      $(document).ready(function(){
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
         });

         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });
   </script>
</head>

【讨论】：

Matei 是正确的，并且已经为您很好地重构了您的代码。并记住尽量不要在<head> 中包含 JS - 将其放在 HTML 底部的 </body> 结束标记之前，以便它最后加载到 DOM 中，请参阅此处接受的答案：stackoverflow.com/questions/11786915/…
感谢@matei - 我已经应用了这个，但似乎仍然没有 100% 工作？我现在确实看到了深色叠加层（但它也覆盖了广告）。并且关闭按钮仍然没有功能:(
@NickBull 在正文标签内？我已经尝试过了，似乎 Jquery 停止工作了？
是的，就在 </body> 标签之前，只需复制并粘贴 Matei 答案的 <head> 标签之间的所有内容。如果关闭按钮不起作用，请尝试我对 Matei 的回答所做的编辑。 EDIT 在它被批准之前，我已将 $(this).parent.hide() 更改为 $('#popup').hide()。测试一下，这应该可以修复您的关闭按钮。
我明白了，好的，移到 </body> 之前。此外，我已经更新了那部分脚本，但仍然无法正常工作。弹出窗口似乎在叠加层后面？

【解决方案2】：

如果您想尝试另一个弹出窗口，以下链接将为您提供帮助， http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/

【讨论】：