0

シンプルなjqueryポップアップがあります。私はそれを機能させるのに問題があります。現在、ポップアップは表示されません。ライブ Web ページはhttp://www.domainandseo.com/fibro/index.htmlで見ることができます。

少し下にスクロールすると、「クリックして拡大」というリンクがあり、ポップアップが表示されます。

私のhtmlは次のとおりです。

<div id="lightbox">
            <a href="" class="cross close"><img src="img/cross.png" alt="X" /></a>
            <img src="img/lightbox-img.jpg" alt="Supplemental Facts" class="lightbox-img" />
        </div>

    <div class="overlay"></div>

CSS は次のとおりです。

#lightbox {
    width: 722px;
    height: 732px;
    background: #FFF;
    z-index: 1000;
    position: absolute;
    left: 250px;
    top: 100px;
    display: none;
}
    .cross {
        float: right;
    }
    .lightbox-img {
        margin-left: 90px;
        margin-top: 45px;
    }

.overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:130%;
    z-index:998;
    background: url(../img/gray.png) repeat;
    display: none;
}

そして、ポップアップのjQuery:

$(document).ready(function(){
//open popup
$(".pop").click(function(){
  $("#lightbox").fadeIn(1000);
  $(".overlay").css ({display: 'block'});
  positionPopup();

});


//close popup
$(".close").click(function(){
    $("#lightbox").fadeOut(500);
    $(".overlay").css ({display: 'none'});
});
});

//position the popup at the center of the page
function positionPopup(){
  if(!$("#lightbox").is(':visible')){
    return;
  } 
  $("#lightbox").css({


  });
}


//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
4

2 に答える 2

1

変化する 

$(".#lightbox")

に

$("#lightbox")
于 2013-10-23T01:39:22.480 に答える
0

これは、コードに簡単に実装できる単純化されたバージョンです。アンカー タグを使用してイベントをトリガーする際の問題は、空のアンカー タグによってユーザーがページの上部に戻されることです。div代わりにaを使用してください。

http://jsfiddle.net/tvb4X/

于 2013-10-23T03:28:18.197 に答える