0

我有一个简单的 jquery 弹出窗口。我在使它工作时遇到问题。现在弹出窗口没有出现。Live 网页可见： 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

This is a simplified version that should be easily implemented into your code. The problem with using an anchor tag to trigger the event is that an empty anchor tag will send the user back to the top of the page. Use a div instead.

http://jsfiddle.net/tvb4X/

于 2013-10-23T03:28:18.197 回答