灯箱不会在两个链接上

Question

我不是最好的Javascript所以要善良！我有4个链接，每个链接依次启动一个简单的灯箱，前2个显示相关的灯箱窗口，但最后2个只显示黑色覆盖而不是白色框？据我所知，没有差异？

<li><a href="javascript:void(0)" class="showpopInfo">INFO</a></li>
<li>-</li>
<li><a href="javascript:void(0)" class="showpopTips">TIPS</a></li>
<li>-</li>
<li><a href="javascript:void(0)" class="showpopGallery">GALLERY</a></li>
<li>-</li>
<li><a href="javascript:void(0)" class="showpopContact">CONTACT</a></li>

以下是弹出窗口：

<!-- INFO POPUP -->
<div id="lightInfo" class="white_content">
    <a href ="javascript:void(0)" class="hidepop textright">Close</a>
    Info
</div>
<div id="fade" class="black_overlay"></div>


<!-- TIPS POPUP -->
<div id="lightTips" class="white_content">
    <a href ="javascript:void(0)" class="hidepop textright">Close</a>
    Tips
    <div id="fade" class="black_overlay"></div>

    <!-- GALLERY POPUP -->
    <div id="lightGallery" class="white_content">
        <a href ="javascript:void(0)" class="hidepop textright">Close</a>
        Gallery
        <div id="fade" class="black_overlay"></div>


        <!-- CONTACT POPUP -->
        <div id="lightContact" class="white_content">
            <a href ="javascript:void(0)" class="hidepop textright">Close</a>
            CONTACT
            <div id="fade" class="black_overlay"></div>

和JS：

$(".showpopInfo").click(function(){
    $("#lightInfo").show();
    $("#fade").show();
});
$(".hidepop").click(function(){
    $("#lightInfo").hide();
    $("#fade").hide();
});

$(".showpopTips").click(function(){
    $("#lightTips").show();
    $("#fade").show();
});
$(".hidepop").click(function(){
    $("#lightTips").hide();
    $("#fade").hide();
});

$(".showpopGallery").click(function(){
    $("#lightGallery").show();
    $("#fade").show();
});
$(".hidepop").click(function(){
    $("#lightGallery").hide();
    $("#fade").hide();
});

$(".showpopContact").click(function(){
    $("#lightContact").show();
    $("#fade").show();
});
$(".hidepop").click(function(){
    $("#lightContact").hide();
    $("#fade").hide();
});