1

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

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

该网站在这里：http: //0034.eu/townapp/

这是代码：

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

提前非常感谢！

4

2 回答 2

2

您必须包含 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>
于 2013-07-12T08:00:47.450 回答
0

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

于 2013-07-12T08:00:05.353 回答