So I’m working on a administration panel using quite a bit of JavaScript & jQuery. jQuery is pretty powerful and with their UI version of jQuery it adds a lot of useful tools. But there was one thing I wanted with the jQuery.Dialog module/widget. I wanted to toggle when a dialog was closeable and not closeable.
So here are a few modifications I added to 1.5.2 of jQueryUI.
First you must have the non minified version, so you can see the full source code. Below this function:
destroy: function() {
(this.overlay && this.overlay.destroy());
this.uiDialog.hide();
this.element
.unbind('.dialog')
.removeData('dialog')
.removeClass('ui-dialog-content')
.hide().appendTo('body');
this.uiDialog.remove();
},
I added this:
closeable: function ( closeable ) {
this.options.closeable = closeable;
},
And then in the two close areas of the dialog code:
close: function() {
And
.click(function() {
self.close();
return false;
});
I added this short line of code:
if( options.closeable == false ) return false;
Of course you can add this code to the destroy function as to make sure you don’t kill it with a destroy either and I’m going to be adding it in there.
You can also send this through with the options when you initiate your dialog:
$("#editDialog").dialog({
modal: true,
overlay: {
"background-color": "#000",
"opacity": "0.75",
"-moz-opacity": "0.75"
},
resizable: false,
title: title,
height: 450,
width: 600,
closeable: false
});
And also here’s how you toggle between the two:
Make the dialog able to close:
$("#editDialog").dialog("closeable", true);
Make it so that the dialog can’t be closed:
$("#editDialog").dialog("closeable", false);
Well that’s it for right now. Just putting this up for future if I need it.