javascript在一个文档中有两个弹出窗口

javascript 2 popup windows in one document

本文关键字：两个 窗口 文档 一个 javascript      更新时间：2023-09-26

我尝试使用此代码。它与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>

我哪里出错了？

您很可能会显示两个以上的弹出窗口，给其中一个不同的位置和类，并使用不同的Javascript函数来显示每个弹出窗口，或者向函数发送一个变量来决定查看哪个弹出窗口。

会是这样的：

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

更新：这是你要求的fiddle代码。http://jsfiddle.net/jBf2y/2/

上面的代码正在运行。您只需要为#popup2div设置一个边距。它们会一起出现，但由于它们处于相同的位置，您只能看到其中一个。

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

最后，我做了这样的

相关文章：