Question

我在页面中至少有20个链接，在每个链接上我必须显示一个具有不同内容的弹出窗口。有什么方法我只能调用一个javascript函数并传递它必须显示为popup的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>

如果我点击其他链接，首先应该关闭。请给出合适的答案。感谢

Answer 1

我会尝试这样的事情

<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>

Answer 2

的 jsFiddle Demo 的

你可以这样做

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

Answer 3

<div id='1' class="div">
<a href='#'>Moreinfo</a>

    <div id='popup1' class="poppup">Content for first link</div>
</div>
<div id='2' class="div">
<a href='#'>Moreinfo</a>

    <div id='popup2' class="poppup">Content for first link</div>
</div>

JQUERY

 $('.div').click(function () {
        $('.poppup').hide();
        $(this).children('.poppup').show();
    });

JS FIDDLE LINK

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

3 个答案: