Question

我尝试使用This code。它适用于1个窗口，但我需要2个弹出窗口。

我尝试像这样修改它

 $(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
    $("#popup2").show();
}
function PopUpHide(){
    $("#popup1").hide();
    $("#popup2").hide();
}

和HTML

<div class="b-container">
    Sample Text
    <a href="javascript:PopUpShow()">Show popup</a>
</div>
<div class="b-popup" id="popup1">
    <div class="b-popup-content">
        Text in Popup
    <a href="javascript:PopUpHide()">Hide popup</a>
    </div>
</div>
<div class="b-container">
    Sample Text
    <a href="javascript:PopUpShow()">Show popup</a>
</div>
<div class="b-popup" id="popup2">
    <div class="b-popup-content">
        Text in Popup
    <a href="javascript:PopUpHide()">Hide popup</a>
    </div>
</div>

我犯错误的地方？

Answer 1

你最有可能在彼此之上显示两个弹出窗口，给其中一个不同的位置和类，并使用不同的Javascript函数来显示每个，或者向函数发送一个变量来决定要查看哪个。

会是这样的：

function popupshow(whichOne)
{
    if(whichOne == 'first'){
        $("#popup1").show();
        $("#popup2").hide();
    }
    else{
        $("#popup1").hide();
        $("#popup2").show();
    }
}

更新：这是您要求的小提琴代码。 http://jsfiddle.net/jBf2y/2/

Answer 2

上面的代码正常运行。你只需要为＃popup2 div设置一个余量。他们一起出现，但由于他们处于相同的位置，你只能看到其中一个。

Answer 3

 $(document).ready(function(){
    PopUpHide();
});
function PopUpShow1(){
    $("#popup1").show();
function PopUpShow2(){
    $("#popup2").show();
}
function PopUpHide(){
    $("#popup1").hide();
    $("#popup2").hide();
}

最后，我这样做

一个文档中的javascript 2弹出窗口

3 个答案: