Fatal编程技术网

Javascript/HTML/CSS弹出窗口

javascript html css

Javascript/HTML/CSS弹出窗口,javascript,html,css,popup,overlay,Javascript,Html,Css,Popup,Overlay,我正在使用一个隐藏的DIV处理一个弹出窗口，并使用window.onload加载它。除此之外，我还加载了一个带有覆盖CSS样式的空DIV（用半透明黑色填充弹出窗口后面的背景）。最后，在弹出窗口的右上角有一个关闭按钮 我已经浏览了SA和几个论坛（因为这是我第一次用JS做类似的事情）&从那里获得了大部分代码。然而，当把所有这些加在一起的时候，有些东西阻止了它的工作，我已经盯着它看了一天了，也许我只是错过了一些非常明显的东西 网址如下： 下面是代码： JS： <script type="text

我正在使用一个隐藏的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>
提前多谢

如果您想尝试另一个弹出窗口，以下链接将帮助您，

您必须包含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>


//您可以使用jquery来实现这一点
$（文档）.ready（函数（）{
$（'#overlay back'）.fadeIn（500，function（）{
$（'弹出窗口'）.show（）；
});
$（“.close image”）。在（'click'，function（）上{
$（'弹出'）.hide（）；
$（“#叠加回”）.fadeOut（500）；
});
});
您是否将jquery框架包含在您的头部部分？Matei是正确的，并且为您很好地重构了代码。记住不要将JS包含在
中-将其放在HTML的底部，在关闭
标记之前，以便它最后加载到DOM中，请参见此处接受的答案：感谢@matei-我已经应用了它，但似乎仍然无法100%工作？我现在确实看到了黑色覆盖层（但它也覆盖了广告）。“关闭”按钮仍然没有任何功能：（@NickBull在body标签内？我试过了，Jquery似乎停止工作了？是的，就在
标签之前，只需复制并粘贴Matei答案的
标签之间的所有内容。如果关闭按钮不起作用，请尝试我对Matei的答案所做的编辑。编辑直到它被批准，我已经更改了$（此）.parent.hide（）到$（'#popup'）.hide（）。测试一下，这应该可以修复关闭按钮。我知道了，ok移到了
之前。我还更新了脚本的这一部分，但仍然不起作用。弹出窗口似乎在覆盖后面？ 
    #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>
   <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>