Its fairly easy to implement jQuery popup dialog. You just need to include jQuery UI JS and CSS in your project and need to call the method as follows:
.dialog() with additional options as you want.
$("#dialog-form").dialog({
title: "Dialog Title",
width: 500,
height: 400,
autoOpen: false,
modal: true,
buttons: {
"Ok": function() {
$('#buttonExecute').val("Show Dialog - Yes");
$(this).dialog("close");
},
"Cancel": function() {
$('#buttonExecute').val("Show Dialog - No");
$(this).dialog("close");
}
},
close: function( event, ui ) {
console.log(event);
console.log(ui);
},
open: function( event, ui ) {
$('#buttonExecute').val("Show Dialog - Open");
}
});
$('#buttonExecute').click(function() {
$("#dialog-form").dialog("open");
});
Which will show dialog as below screenshot:
You can download full example from below link:
Click here to download.
.dialog() with additional options as you want.
$("#dialog-form").dialog({
title: "Dialog Title",
width: 500,
height: 400,
autoOpen: false,
modal: true,
buttons: {
"Ok": function() {
$('#buttonExecute').val("Show Dialog - Yes");
$(this).dialog("close");
},
"Cancel": function() {
$('#buttonExecute').val("Show Dialog - No");
$(this).dialog("close");
}
},
close: function( event, ui ) {
console.log(event);
console.log(ui);
},
open: function( event, ui ) {
$('#buttonExecute').val("Show Dialog - Open");
}
});
$('#buttonExecute').click(function() {
$("#dialog-form").dialog("open");
});
Which will show dialog as below screenshot:
You can download full example from below link:
Click here to download.