1

非表示の DIV を使用してポップアップを作成し、window.onload. これに加えて、空の DIV をオーバーレイ CSS スタイルでロードしています (ポップアップの背後の背景を半透明の黒で塗りつぶすため)。最後に、ポップアップの右上隅に閉じるボタンがあります。

私はSAといくつかのフォーラムをスキャンして（JSでこのようなことをするのはこれが初めてなので）、そこからほとんどのコードを入手しました。しかし、それをすべて追加すると、何かが機能しなくなっています。私はこれを1日じっと見つめていましたが、本当に明らかな何かが欠けているのでしょうか?

サイトはこちら: 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 に答える