1

I want to make a popup box (with text in it) come out when i click a hyperlink. I have 5 hyperlinks in my html. Here is the code :

<div class="four columns">
  <h4>
    <a id="OpenDialog" href="#" >Open dialog 1</a>
  </h4>
  <img src="one.jpg" />
  <div id="dialog" title="Dialog Title 1">dialog text 1</div>
</div>
<div class="four columns">
  <h4>
    <a id="OpenDialog" href="#" >Open dialog 2</a>
  </h4>
  <img src="two.jpg" />
  <div id="dialog" title="Dialog Title 2">dialog text 2</div>
</div>

I put this in my html as well :

   <script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            $("#dialog").dialog({modal: true, height: 590, width: 1005 });
        });
    });
  </script>

and I also included this ready scripts :

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

But the thing is that the pop up functions only in the first hyperlink.

eyettea
  • 1,376
  • 2
  • 16
  • 35
Datacrawler
  • 2,780
  • 8
  • 46
  • 100

2 Answers2

4

I would use jquery parent and children to get what you want. (jsfiddle: http://jsfiddle.net/pjVcR/2/)

<script>
$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( e, ui ) {
      $(this).dialog('destroy');
    }
  });
});
</script>

In this case you would have to hide the .dialog divs in the beginning. Moreover, change the dialog container to have a class (and not an id) named "dialog". This way you will not have many divs with the same id, and your functionality will be there.

Here some references:

  1. http://api.jquery.com/parent/
  2. http://api.jquery.com/children/
  3. Getting the ID of the element that fired an event
Community
  • 1
  • 1
eyettea
  • 1,376
  • 2
  • 16
  • 35
0

first add these files

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

then

 <script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function (e) {
        e.preventDefault();
            $("#dialog").dialog({modal: true, height: 590, width: 1005 });
        });
    });
  </script>

reference jQuery dialog box

Rituraj ratan
  • 10,260
  • 8
  • 34
  • 55