How to make jQuery dialog modal? - javascript

I am using jQuery dialog in asp.net. It is working fine for me. The problem is when I open the dialog box, I can still work parent page functionality. I don't want that. Just dialog to modal and should not allow focus on parent page.
window.onload = function onloadFunction() {
//setup edit person dialog
$('#uploadPic').dialog({
autoOpen: false,
draggable: true,
title: "Upload Picture",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
}
Is there any way to make it modal? Or if lost focus on dialog box close it automatically?
Please help me out.


Use
$('#uploadPic').dialog({
autoOpen: false,
modal: true,
draggable: true,
title: "Upload Picture",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
}
I have just added the modal option to your sample.


Read the documentation of JQuery Ui Dialog in: http://docs.jquery.com/UI/Dialog
Exist a Option called Modal, here is some samples from doc:
Initialize a dialog with the modal option specified.
$( ".selector" ).dialog({ modal: true });
Get or set the modal option, after init.
//getter
var modal = $( ".selector" ).dialog( "option", "modal" );
//setter
$( ".selector" ).dialog( "option", "modal", true );

Related

HTML form default action is running if jqueryui dialog div content change to original content

i am displaying html form inside jqueryui dialog and i am using jquery validation plugin to validate it.
Problem - when i submit form by changing content to original, default form action is running.
It is only happening if i change html content to original content before form closing.
Here is my code:
$(document).ready(function() {
var getOldForm = $("#send-pm-win").html();
$("#pmLink").click(function() {
$("#send-pm-win").dialog({
modal: true,
draggable: false,
resizable: false,
autoOpen: true,
buttons: [{
text: "Cancel",
click: function() {
$(this).dialog("close");
},
style: "outline: none;"
}],
close: function(event, ui) {
$("#send-pm-win").html(getOldForm);
$(this).dialog("destroy");
}
});
});
});

jQueryUI modal dialog and delay close

I'm using contact form in modal jQueryUI dialog, I would like to show an string "your mail was sent successfully" for 1.5 seconds and then close an dialog. I use that code for it:
$( "#dialog-form" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Send": function() {
$( this ).dialog( "option", "hide", { delay: 1500 } );
$( this ).dialog( "close" );
}
}
},
close: function() {
}
});
(removed some code for more clarity)
Code generally works, dialog window closes after 1.5 second of delay as I expect.
but, opacity which covers rest of site "under" dialog disappear without timeout.

jQuery wont open 2 consecutive modal dialogs correctly

I am trying to get a button inside a jQuery UI modal dialog to close itself and open another modal dialog.
The problem is that the second dialog when opened will always open without the screen overlay you expect from a modal dialog, as a result you can still click on the screen behind the modal.
The jQuery is as follows
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
I have also tried changing the handler to
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog("close");
$("#DialogCreateToDo").dialog("open");
});
Which didn't help
Here is the jsFiddle
Could someone please help me understand why this might be happening? Is this a bug or have I done something wrong?

There is a typo in your code, in the second dialog definition you have "model : true", when it is supposed to be "modal : true"
$(function () {
$("#DialogSelectEventType").dialog({
modal: true,
autoOpen: true,
width: 400
});
$("#DialogCreateToDo").dialog({
modal: true,
autoOpen: false,
width: 450
});
$("#btnCreateToDo").click(function (e) {
$("#DialogSelectEventType").dialog({ close: function (e, ui) {
$("#DialogCreateToDo").dialog("open");
}}).dialog("close");
});
});
Try this: http://jsfiddle.net/tzKf7/3/
Hope it helps.

Moving the .dialog definition into the click handler will do the trick.
$("#btnCreateToDo").click(function (e) {
$("#DialogCreateToDo").dialog({
model: true,
autoOpen: true,
width: 450
});
});

How to use the same jQuery UI dialog box?

I want to use a jQuery UI dialog to display the errors in the different inputs. My problem is that I would like to define the feature of dialog box only one but associate it with several html containing an id and a specific error message.
How could I do that?
At the moment, I have this:
// definition of the dialog, to do only once
$( "#dialog" ).dialog({
autoOpen: false,
show: {effect: 'fade', speed: 100},
hide: {effect: 'fade', speed: 100},
modal: true,
resizable: false,
title: "Incorrect value",
buttons: { Ok: function() { $(this).dialog( "close" ); }},
beforeClose: function() { $( "#time_at_address_years1" ).focus().val('') },
});
// the event, one per input
$( "#time_at_address_years1" ).blur(function() {
$( "#dialog1" ).dialog( "open" );
return false;
});
And the HTML of one message is like this:
<div id="dialog">
<p>The error message here.</p>
</div>

Just warp the dialog in a function and pass that function the current jQuery-selector.
function my_dialog(selector, tofocus) {
$(selector).dialog({autoOpen:true, ...more options...});
}
Than call it like this:
$( "#time_at_address_years1" ).blur(function() {
my_dialog('#dialog1', '#time_at_address_years1');
return false;
});
Also, you should have a look at the jQuery-Validator-Plugin http://docs.jquery.com/Plugins/Validation

jQuery UI Alert Dialog as a replacement for alert()

I'm using alert() to output my validation errors back to the user as my design does not make provision for anything else, but I would rather use jQuery UI dialog as the alert dialog box for my message.
Since errors are not contained in a (html) div, I am not sure how to go about doing this. Normally you would assign the dialog() to a div say $("#divName").dialog() but I more need a js function something like alert_dialog("Custom message here") or something similiar.
Any ideas?

I don't think you even need to attach it to the DOM, this seems to work for me:
$("<div>Test message</div>").dialog();
Here's a JS fiddle:
http://jsfiddle.net/TpTNL/98

Using some of the info in here I ended up creating my own function to use.
Could be used as...
custom_alert();
custom_alert( 'Display Message' );
custom_alert( 'Display Message', 'Set Title' );
jQuery UI Alert Replacement
function custom_alert( message, title ) {
if ( !title )
title = 'Alert';
if ( !message )
message = 'No Message to Display.';
$('<div></div>').html( message ).dialog({
title: title,
resizable: false,
modal: true,
buttons: {
'Ok': function() {
$( this ).dialog( 'close' );
}
}
});
}

Building on eidylon's answer, here's a version that will not show the title bar if TitleMsg is empty:
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!outputMsg) return;
var div=$('<div></div>');
div.html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
if (!titleMsg) div.siblings('.ui-dialog-titlebar').hide();
}
see jsfiddle

Just throw an empty, hidden div onto your html page and give it an ID. Then you can use that for your jQuery UI dialog. You can populate the text just like you normally would with any jquery call.

As mentioned by nux and micheg79 a node is left behind in the DOM after the dialog closes.
This can also be cleaned up simply by adding:
$(this).dialog('destroy').remove();
to the close method of the dialog.
Example adding this line to eidylon's answer:
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: function() { onCloseCallback();
/* Cleanup node(s) from DOM */
$(this).dialog('destroy').remove();
}
});
}
EDIT: I had problems getting callback function to run and found that I had to add parentheses () to onCloseCallback to actually trigger the callback. This helped me understand why: In JavaScript, does it make a difference if I call a function with parentheses?

DAlert jQuery UI Plugin Check this out, This may help you

I took #EkoJR's answer, and added an additional parameter to pass in with a callback function to occur when the user closes the dialog.
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
}
You can then call it and pass it a function, that will occur when the user closes the dialog, as so:
jqAlert('Your payment maintenance has been saved.',
'Processing Complete',
function(){ window.location = 'search.aspx' })

There is an issue that if you close the dialog it will execute the onCloseCallback function. This is a better design.
function jAlert2(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": onCloseCallback,
"Cancel": function() {
$( this ).dialog( "destroy" );
}
},
});

Use this code syntax.
$("<div></div>").html("YOUR MESSAGE").dialog();
this works but it append a node to the DOM.
You can use a class and then or first remove all elements with that class.
ex:
function simple_alert(msg)
{
$('div.simple_alert').remove();
$('<div></div>').html(is_valid.msg).dialog({dialogClass:'simple_alert'});
}

Categories

Resources