My goal is to have a different dialog box appear for each item clicked. I currently have one setup and figured I can just add an if statement. If mousedown on div_a, dialog_a, e
Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog()
capability (they call it a "widget"). Here's how it works:
(1) Include both jQuery and the jQueryUI libraries in your tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):
(2) Create an empty div in your HTML, and initialize it as a dialog:
HTML:
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3) Then, when you are ready to display the dialog, insert new data into the myDlg
div just before opening the dialog:
$('#myDlg').html('This will display in the dialog');
$('#myDlg').dialog('open');
The above allows you to change the content of the dialog and use the re-same dialog DIV each time.
Here's what the working example would look like:
jsFiddle Demo
HTML:
What is 2 + 2?
4
What is the 12th Imam?
The totally wacky reason why Iran wants a nuclear bomb.
jQuery:
var que,ans;
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto',
buttons: {
"See Answer": function(){
$('#myDlg').html(ans);
$('.ui-dialog-buttonset').next('button').hide();
},
"Close": function(){
$('#myDlg').html('').dialog('close');
}
}
});
$('.allques').click(function(){
que = $(this).find('.question').html();
ans = $(this).find('.answer').html();
$('#myDlg').html(que).dialog('open');
});
Resources:
How to use Plugins for PopUp
http://jqueryui.com/dialog/
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
jQuery UI Dialog Box - does not open after being closed
Dynamically changing jQueryUI dialog buttons
jQuery UI dialog - problem with event on close