Question

我有一个简单的jquery弹出窗口。我有问题使它工作。现在弹出窗口没有显示出来。可在以下网址查看实时网页：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);

Answer 1

更改

$(".#lightbox")

到

$("#lightbox")

Answer 2

这是一个简化版本，应该可以轻松实现到您的代码中。使用锚标记来触发事件的问题是空锚标记会将用户发送回页面顶部。请改用div。

http://jsfiddle.net/tvb4X/

jQuery弹出窗口不起作用 - 简单的自定义弹出窗口

2 个答案: