如何在同一页面中打开多个jquery对话框

我在一个页面中至少有20个链接，在每个链接上我必须显示一个包含不同内容的弹出窗口。是否有任何方法，我可以只调用一个javascript函数并将其传递给必须显示为弹出窗口的div id。我的html结构如下所示

<div id='1'>    
<a href='#'>Moreinfo</a>
<div id='popup1'>
Content for first link
</div>
</div>

<div id='2'>
<a href='#'>Moreinfo</a>
<div id='popup2'>
Content for first link
</div>
</div>

$("div[id^=popup]").hide();
$("a").click(function(){
 $("div[id^=popup]").hide();
 var id = this.parentNode.id;
 $("#popup"+id).show();
});

<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".clickToPopup").click(function(){
             $(".popup").hide();
             $(this).parent("div.popupHolder").children("div.popup").show();
        });
    });
</script>

第一个链接的内容
第一个链接的内容

此外，如果我点击其他链接第一个应该关闭。 请给出适当的例子作为答复。 谢谢

你可以这样做

<div id='1'>    
<a href='#'>Moreinfo</a>
<div id='popup1'>
Content for first link
</div>
</div>

<div id='2'>
<a href='#'>Moreinfo</a>
<div id='popup2'>
Content for first link
</div>
</div>

$("div[id^=popup]").hide();
$("a").click(function(){
 $("div[id^=popup]").hide();
 var id = this.parentNode.id;
 $("#popup"+id).show();
});

<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".clickToPopup").click(function(){
             $(".popup").hide();
             $(this).parent("div.popupHolder").children("div.popup").show();
        });
    });
</script>

---

我想试试这样的

<div id='1'>    
<a href='#'>Moreinfo</a>
<div id='popup1'>
Content for first link
</div>
</div>

<div id='2'>
<a href='#'>Moreinfo</a>
<div id='popup2'>
Content for first link
</div>
</div>

$("div[id^=popup]").hide();
$("a").click(function(){
 $("div[id^=popup]").hide();
 var id = this.parentNode.id;
 $("#popup"+id).show();
});

<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".clickToPopup").click(function(){
             $(".popup").hide();
             $(this).parent("div.popupHolder").children("div.popup").show();
        });
    });
</script>

点击这里
您的弹出内容
点击这里
您的弹出内容
$（文档）.ready（函数（）{
$（“.clickToPopup”）。单击（函数（）{
$（“.popup”）.hide（）；
$（this）.parent（“div.popupUploder”）.children（“div.popup”）.show（）；
});
});

---

弹出式div是否隐藏？给它们一个

类

，并利用

此

此链接可能会有帮助：