Develop Reference

How do you prevent Modal dialog from closing when users clicks outside of the modal dialog box In JQuery UI?

I'm stuck on a old project using Jquery UI to display Modals on view. The issue that I am having is that the dialog modal view is closing when user clicks outside of Model Dialog. In Jquery is there a property to prevent this? I know that backdrop and keyboard property in Bootstrap would help in Boostrap in preventing closing of modal base on outside click but what is the case with Jquery UI?
Here's my Javascript code below:
// EDit Dialog
var updateBanquetTicketDialog = function () {
var s = $('<div></div>').dialog({
title: "Edit Banquet Ticket",
autoOpen: false,
dialogClass: "success-dialog",
modal: true,
buttons: [
{
text: "Update"
, 'class': "btn-primary"
, click: function () {
updateBanquetTicket();
}
},
{
text: "Cancel"
, 'class': "btn-warning"
, click: function () {
editBanTicketDiag.dialog('destroy');
}
}
]
});
return s;
}

I Figured it out. You must go to jquery.dialog.js file
and on line number 117 on show function replace it's code with:
var show = function () {
//call the bootstrap modal to handle the show events (fade effects, body class and backdrop div)
//$msgbox.modal('show');
$msgbox.modal({
show: true,
backdrop: 'static',
keyboard: true
});
};

How to bind the close event for this script jquery

Hi i need to reload the parent page when close button clicked on modal dialog.
my code is:
//customer edit start
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.post("sample.php",
{
name:myGroupId,
},
function(data,status){
});
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
I tried for close button as/
$( ".ui-dialog-titlebar-close" ).click(function() {
window.location.reload(true);
});
on below also tried inside.Nothing works.Can anybody help me.Thanks.

You can use native create event of dialogue to bind close button click. Like this:
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn",
create: function() {
$(this).closest('div.ui-dialog')
.find('a.ui-dialog-titlebar-close')
.click(function(e) {
window.location.reload(true);
e.preventDefault();
});}
});
Working Demo

Try to use window property , to get access to main page from iframe
top Returns the topmost browser window
can you give link to your page or example at jsbin?

Elements that are added to the DOM at runtime requires event delegation as your popup is generated using model (jQuery UI)
You can execute a click event of close button by doing this:
$(document.body).on('click','.ui-dialog-titlebar-close',function(e) {
e.preventDefault(); // To prevent default dialog close action
window.location.reload(true);
});
See the API documentation for .on()
May be this will fix. But i think close() of model popup is already defined in UI. You may prevent the default action.

JqueryUI Tooltip on modal button re-appears on modal close

Hi there StackOverflowvians!
I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of javascript.
$(function() {
$("#button-menu").tooltip({
position: {
my: "top",
at: "bottom+10",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
}
}
});
$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: { effect: "fadeIn", duration: 100 }});
});
So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.
I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears
$(function() {
$( "#searchform" ).dialog({
modal: true,
autoOpen: false,
close: function( event, ui ) {$('a.search').blur();},
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "a.search" ).click(function() {
$( "#searchform" ).dialog( "open" );
});
});
edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?

The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.
Something like:
$('.dialogSelector').dialog({
open: function( event, ui ) {
$('.tooltipSelector').tooltip('disable');
}
});
$('.dialogSelector').dialog({
close: function( event, ui ) {
$('.tooltipSelector').tooltip();
// OR
myTooltipFunction();
}
});

I was having the same problem. What solved it for me was adding an 'Ok' buton
$("#dialog").dialog({
resizable: false,
autoOpen: false,
height: 200,
width: 440,
modal: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});

How do I pass a an element position to jquery UI dialog

I have a list of elements and when clicking on each one I would like my jQueryUI dialog box to pop up next to the list element that was clicked on.
$( "#selector" ).dialog({ draggable: false,
width: 250,
autoOpen: false,
position: [e.pageX,e.pageY] });
$(".openDialog").click(function(e){
console.log('I need the cooridnates x:'+e.pageX+' and y:'+e.pageY+'to be passed to the dialog box');
$( "#selector" ).dialog("open");
});
I can get the coordinates I need, but I'm having trouble passing them to the dialog init.
Would love some insight into this.
Thanks in advance!

Since you want to show the dialog next to the clicked element, you should defer setting the dialog's position until that information becomes available, i.e. in your event handler:
$("#selector").dialog({
draggable: false,
width: 250,
autoOpen: false
});
$(".openDialog").click(function(e) {
$("#selector").dialog("option", "position", [e.pageX, e.pageY])
.dialog("open");
});

Before showing the dialog again, try:
$("#selector").dialog("option", "position", [e.pageX, e.pageY]);

jquery-ui-dialog - How to hook into dialog close event

I am using the jquery-ui-dialog plugin
I am looking for way to refresh the page when in some circumstances when the dialog is closed.
Is there a way to capture a close event from the dialog?
I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.

I have found it!
You can catch the close event using the following code:
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
Obviously I can replace the alert with whatever I need to do.
Edit: As of Jquery 1.7, the bind() has become on()

I believe you can also do it while creating the dialog (copied from a project I did):
dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});
Note close: CloseFunction

$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});

$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
"close" property of dialog gives the close event for the same.

U can also try this
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});

This is what worked for me...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
Because no one actually created an answer with using .on() instead of bind() i decided to create one.
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});

add option 'close' like under sample and do what you want inline function
close: function(e){
//do something
}

If I'm understanding the type of window you're talking about, wouldn't $(window).unload() (for the dialog window) give you the hook you need?
(And if I misunderstood, and you're talking about a dialog box made via CSS rather than a pop-up browser window, then all the ways of closing that window are elements you could register click handers for.)
Edit: Ah, I see now you're talking about jquery-ui dialogs, which are made via CSS. You can hook the X which closes the window by registering a click handler for the element with the class ui-dialog-titlebar-close.
More useful, perhaps, is you tell you how to figure that out quickly. While displaying the dialog, just pop open FireBug and Inspect the elements that can close the window. You'll instantly see how they are defined and that gives you what you need to register the click handlers.
So to directly answer your question, I believe the answer is really "no" -- there's isn't a close event you can hook, but "yes" -- you can hook all the ways to close the dialog box fairly easily and get what you want.

You may try the following code for capturing the closing event for any item : page, dialog etc.
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});