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
});
};

fancybox beforeClose issue

I have a form implemented in a fancybox (version 2.1.5) iframe. People can choose to not to fill up the form and click on "X" to close fancybox form or alternately fill up the form and click on Register.
I have a beforeClose callback setup to set cookies and do some work. But I want this to be triggered only if someone clicks on "X" or Esc key. See code below
$.fancybox.open({
type: "iframe",
href: "/[url].php",
autoSize: true,
height: "auto",
margin: 0,
padding: 0,
autoCenter: true,
maxWidth: 460,
maxHeight: 615,
modal: false,
iframe: {
scrolling: "no"
},
beforeClose: function () {
//set cookie code
},
});
But if someone was to Register, it will show a Thank you message for 2 seconds and close the fancybox. This is done by using window.parent.$.fancybox.close(); See detailed code below
$.post('/register.php', post_vars, function(data) {
window.parent.$.fancybox.close();
});
However I do not want the beforeClose event to be called in case I close it from the iFrame or even if it gets called, I need to somehow know that it has been done from the iframe & not using the "X" button.
Is there a way to differentiate this?

I can think different ways to do this, like binding custom events to the fancybox close button or catching the escape key with keyup or keypress, etc.
I guess the simplest way is to create in the parent page, a custom close function like :
var closedFromIframe = false;
function customClose() {
closedFromIframe = true;
jQuery.fancybox.close();
}
This function will close fancybox (from the parent page itself) when invoked from the iframed page AND will enable the (previously defined) closedFromIframe flag, so instead of this :
$.post('/register.php', post_vars, function(data) {
window.parent.$.fancybox.close();
});
... you could do
$.post('/register.php', post_vars, function(data) {
window.parent.customClose();
});
Then, in your fancybox script you could validate within the beforeClose callback, the status of the closedFromIframe flag and do whatever you need to :
$.fancybox.open({
// your API options
beforeClose : function () {
if (closedFromIframe) {
// closed from iframe custom function
} else {
// close button -or- escape key
}
},
afterClose : function () {
closedFromIframe = false; // reset flag
}
});
Notice we are also resetting the closedFromIframe flag within the afterClose callback.
See a DEMO of this implementation.

This will be triggered only if someone clicks on "X" or Esc key
$(document).ready(function () {
$(".fancybox").fancybox({
closeClick: false, // prevents closing when clicking INSIDE fancybox
openEffect: 'none',
closeEffect: 'none',
enableEscapeButton: false,
helpers: {
overlay: {
closeClick: false // prevents closing when clicking OUTSIDE fancybox
}
},
beforeClose: function () {
return confirm('Are you sure?')
}
})
});

Dynamically resize JQuery modal Dialog to IFrame content

I've got a JQuery dialog with an internal iFrame, which uses a php document to be filled with an image and some info. It works correctly, but if I click one of the images to go to the complete size image and show it in the iFrame, the dialog doesn't resize.
This is how the iframe and dialog get created, I've erased some extra code, but here it's the important thingy:
$('<iframe id="frameProductos" width="100%" src="articulos_info.php?codigo_art='+val+'" name="frameProductos">').appendTo('body');
var dialog = $("#frameProductos");
dialog.dialog({
title: 'Revisión de producto',
resizable: false,
modal: true,
position: ['center',150],
overlay: {
opacity: 0.5,
background: "black"
},
open: function( event, ui ) {
$('#frameProductos').width('100%');
},
close: function( event, ui ) {
$(this).dialog('destroy').remove();
},
width: 500,
height: 500,
buttons: {
"Cerrar": function () {
$(this).dialog('destroy').remove();
}
}
});
I need the dialog and iFrame to change their sizes if the content's size changes (when the image gets clicked, and the full resolution image appears).

Important Tip: you must update size of iframe after load completed
$(document).ready(function () {
//do somthing like this
window.parent.resizeIframe();
});

emptying text field after user inserts data for next input

I am using jquery that shows popup for input box. when the user inputs data and submits i redirected action to the same insert action so that the text field can be refreshed.at first pop up for input is shown but when i submit the popup shown previous remained as it is and new pop up for the input box is shown in which the input box is refreshed everytime i click insert.how can I close the previous popup and show only new one. and also please explain ways to empty the the textbox after user inputs data so that he can input next data.
jquery at my layout
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
minWidth: 500,
minHeight: 100,
resizable: false,
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
</head>
This shows popup when i click a button to get input box
below is my jquery in insert view
</script>
<script type="text/javascript">
$(function () {
$('form').submit(function () {
$("#popUp").dialog(
{
title: $(this).attr("data-dialog-title"),
minWidth: 500,
resizable: false,
modal: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
}
);
});
});
</script>
this shows popup for the actions that is performed from this page. ie for error message and insert another user form. Hence the popup is generated from the layout view and again next popup from insert view.I am trying to close popup from layout view when the popup from insert view is generated or some way to clear the text field in insert view without showin second popup.What should i do.

This is the line you want in the code below. I put it inline with a comment to denote but I'll put it here too for easy finding: $(this).find("input").val("");
$('form').submit(function () {
$("#popUp").dialog(
{
title: $(this).attr("data-dialog-title"),
minWidth: 500,
resizable: false,
modal: true,
buttons: {
Close: function () {
//This line below is what you need to clear the field
$(this).find("input").val("");
$(this).dialog("close");
}
}
}
);
});

Hide lightbox form on close; using colorbox.js

Using colorbox.js, I am opening a form in a lightbox when the user clicks on the corresponding link. Right now, when the user visits the page the form is hidden but when the they click on the link the form is viewable in the lightbox. When the close the lightbox out, the form is then visible on the actual page. I would like for the form to be hidden on the page when the user exits the lightbox. Here is my script so far http://jsfiddle.net/j9ths/ :
jQuery(document).ready(function() {
$("#myForm").hide();
$("#link_to_form").click(function() {
$("#myForm").show();
});
$("#link_to_form").colorbox({ width: "50%", inline: true, href: "#myForm" });
$("#cboxClose").click(function() {
$("#myForm").hide();
});
});
The div id of #cboxClose is the "x" button on the lightbox.

You can write onClose callback as you can see here.
$("#link_to_form").colorbox({
width: "50%",
inline: true,
href: "#myForm",
onclose: function() {
$("#myForm").hide();
}
});
$("#cboxClose").on('click', function() {
$("#link_to_form").colorbox.close();
});