arthurh88
asked on
multiple jquery dialogs on the same page?
Here is my working java script for a single JQuery dialog button:
In my HTML I use this:
<div id="myDialog" title="Dialog1">
<p>hello world</p>
</div>
<input type="image" name="opener" id="opener" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/learnmore.png" onclick="return false;" />
Now I want to make another button (up to 10 more), but using the same ID for a button does not work. If I change my second Button ID, then my script doesn't work. If I use class="opener" for a second button, that doesn't work.
Any ideas on how to get multiple dialog's working on the same page, using image buttons?
$.fx.speeds._default = 800;
$(function thedialog() {
$("#myDialog").dialog({
autoOpen: false,
show: 'slide',
hide: 'explode',
modal: false,
width: 300,
minHeight: 200,
maxHeight: 500,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#opener").click(function (e) {
e.preventDefault();
$("#myDialog").dialog("open").effect("highlight", {}, 2000);
;
return false;
});
function positionDialog() {
linkOffset = $("#opener").position();
linkWidth = $("#opener").width();
linkHeight = $("#opener").height();
scrolltop = $(window).scrollTop();
$("#myDialog").dialog("option", "position", [(linkOffset.left - 200 / 2) + linkWidth / 2, linkOffset.top + linkHeight - scrolltop]);
}
positionDialog();
$(window).resize(function () {
positionDialog();
});
$(window).scroll(function () {
positionDialog();
});
});
</script>
In my HTML I use this:
<div id="myDialog" title="Dialog1">
<p>hello world</p>
</div>
<input type="image" name="opener" id="opener" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/learnmore.png"
Now I want to make another button (up to 10 more), but using the same ID for a button does not work. If I change my second Button ID, then my script doesn't work. If I use class="opener" for a second button, that doesn't work.
Any ideas on how to get multiple dialog's working on the same page, using image buttons?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER