How to open multiple jquery dialogs in same page

Question

I have atleast 20 links in a page and on each link i have to show a popup with different content.Is there any way that i can call only one javascript function and pass it id of div that has to be displayed as popup.My html structure looks like this

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

Also if i click other link first one should close. Please give suitable example in reply. Thanks

This link might help: jquerytools.org/demos/overlay/multiple.html — Sid
– Sid, Commented Apr 12, 2013 at 10:27

bksi · Accepted Answer · 2013-04-12 10:30:57Z

1

I would try something like this

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

answered Apr 12, 2013 at 10:30

bksi

1,6251 gold badge24 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Travis J · Accepted Answer · 2013-04-12 10:30:37Z

0

jsFiddle Demo

You could do it like this

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

answered Apr 12, 2013 at 10:30

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Comments

rahularyansharma · Accepted Answer · 2013-04-12 10:34:31Z

0

<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

answered Apr 12, 2013 at 10:34

rahularyansharma

10.8k18 gold badges86 silver badges140 bronze badges

Collectives™ on Stack Overflow

How to open multiple jquery dialogs in same page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related