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.
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:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments