Multiple Jquery Dialogs on one page

Question

I'm using jquery dialog popup. I have multiple div's (dynamically created) that require the pop-up on a single page. My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?

My html is as follows:

      <a class="open" href="#">
          <img src="/images/someImage1.jpg" />
      </a>

    <div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
    <p> Dialog text and stuff</p>
   </div>

   <a class="open" href="#">
          <img src="/images/someImage1.jpg" />
      </a>

    <div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
    <p> Dialog text and stuff</p>
   </div>

My jquery is as follows:

   <script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css


  $(document).ready(function () {

      $('a.open').prop('id', function (i) {
          return '' + (i + 1);
      });

      $(".dialog").dialog({
              autoOpen: false,
              draggable: false,
              width: "300px",
              modal: true,
              buttons: {
                  "Close": function () {
                      $(this).dialog('destroy').remove()
                  }
              }

          });

      $("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")

   .click(function () {
  alert($(this).attr("id"));

  $(".dialog").dialog("open");
  return false;
   });
  });

    </script>

Anthony Atkinson · Accepted Answer · 2013-10-08 19:49:41Z

2

This should work (or a variant of it).

$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
  alert($(this).attr("id"));

  $(this).next(".dialog").dialog("open");
  return false;
});

answered Oct 8, 2013 at 19:49

Anthony Atkinson

3,2583 gold badges22 silver badges22 bronze badges

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

2 Comments

Mark Over a year ago

I've tried this, but for some reason it makes it that there are no pop-ups.

Anthony Atkinson Over a year ago

Just to be sure, you're not replacing all of your code with this, right?

tymeJV · Accepted Answer · 2013-10-08 19:51:41Z

0

I feel the need to tell you to just use a class as your click handler

$(".open").click(function(e) {
    e.preventDefault();
    $(this).next(".dialog").dialog("open");
});

There's no need for the ID's if you're not using them.

answered Oct 8, 2013 at 19:51

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

DroidOS · Accepted Answer · 2013-10-08 19:51:46Z

0

If I am reading your code correctly what you are doing is

$('.dialog').dialog('open');

i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines

<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
  <p> Dialog text and stuff</p>
</div>

and then do

$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.

that should I suspect do the trick

answered Oct 8, 2013 at 19:51

DroidOS

9,02818 gold badges120 silver badges192 bronze badges

Collectives™ on Stack Overflow

Multiple Jquery Dialogs on one page

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related