DHTML Modal window onClose

[ozdur]

1) Script Title: DHTML modal window

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...dhtmlmodal.htm

3) Describe problem:
Hi,
I use this script, but I couldn't able to run my custom onClose code by clicking close.gif ( that X image on the top right corner) I checked, and it is not working on the original demo too. Just the form item's click events call the onclose function in this script.

How can I make it work the way that DHTML window widget works. I need a confirmation from user, if he/she is closing the window without doing anything.

[ddadmin]

This is actually by design, as when it comes to a modal window, you should always provide your visitors with a fail safe way of closing the window. Otherwise, the entire page will be covered in a veil without recourse. For example, lets say your custom code to execute "onClose" contains an error, and this code is run by the default "x" button as well- the window will fail to close due to the error halting the rest of the button's execution.

However, if you still wish to have the "X' button react to your custom events, inside modalfiles/modal.js, find the line:

t.hide=function(){dhtmlmodal.close(this)} //OVERWRITE default t.hide() method with new one

and remove it. That should do it.

[xmoravej]

I understand you do not want to leave the user stranded with a blocked GUI, but would not be possible to provide similar functionality using either of the following approaches:

1) invoke user's onclose handler and disregard the returned value and always return true from the modal's onclose handler.

2) implement some sort of a onmodalclose handler to allow user to plugin their code.

I like 1), because it allows one to switch between dhtmlwindow and dhtmlmodal without any additional code changes.

I find the onclose handler very useful as I can have the Cancel button in the dialog implement the same functionality as the close button. I often need to do some cleanup, reset of values etc.

Jan

[xmoravej]

If you need the onclose functionality in your modal windows, you can do this:

=== orig ===
t.controls.onclick=function(){dhtmlmodal.forceclose(this._parent)} //OVERWRITE default control action with new one
t.show=function(){dhtmlmodal.show(this)} //OVERWRITE default t.show() method with new one
t.hide=function(){dhtmlmodal.close(this)} //OVERWRITE default t.hide() method with new one

=== new (replace with) ===
t.controls.onclick=function(){dhtmlmodal.close(this._parent)} //OVERWRITE default control action with new one
t.show=function(){dhtmlmodal.show(this)} //OVERWRITE default t.show() method with new one
t.hide=function(){dhtmlmodal.hide(this)} //OVERWRITE default t.hide() method with new one

=== new (new function) ===

// Do not forget about commas separating individual functions when including // this new function!

hide:function(t){
t.contentDoc=(t.contentarea.datatype=="iframe")? window.frames["_iframe-"+t.id].document : t.contentarea //return reference to modal window DIV (or document object in the case of iframe
dhtmlwindow.hide(t)
this.veilstack--
if (this.veilstack==0) //if this is the only modal window visible on the screen, and being closed
this.interVeil.style.display="none"
}

===

It would be great if the dhtmlmodal's author could make the dhtml window onclose functionality available in dhtmlmodal through some config option (maybe one passed to the open function). By scanning the forum, it seems that some people would like to make use of this functionality, myself included :-)

As for the argument claiming that a bug in the user's code that does not hide/close the modal window when the close icon is clicked resulting in a "blocked" GUI, this can certainly happen, but I do not see any value in making dhtml uber wise to resolve a user's BUG by blocking a useful functionality in dhtmlmodal. In addition, the GUI is not really blocked as all/any of the browser buttons, keys, context menu, address bar etc. can still be used to navigate off the page.

Would not it be cool to allow users to easily switch between dhtmlwindow and dhtmlmodal just by changing 'dhtmlwindow' to 'dhtmlmodal'? With a blocked onclose in dhtmlmodal, this is certainly not going to work...

Jan

[xmoravej]

Ops, I forgot about to override the close function

Please add this line:

t.close=function(){dhtmlmodal.close(this)} //OVERWRITE default t.close() method with new one

after this line:

t.controls.onclick=function(){dhtmlmodal.close(this._parent)} //OVERWRITE default control action with new one

Just in case, I am attaching the resulting JS file that seems to work for me.

The JS file also contains a fix for the viel not being properly stretched to the right (see http://www.dynamicdrive.com/forums/s...ad.php?t=26027).

Jan

[mike_hubport]

hi xmoravej,

onclose functionality works only in IE but not in firefox. Please help thanks in advance.

[mike_hubport]

i used your JS fix and added this line:

t.close=function(){dhtmlmodal.close(this)} //OVERWRITE default t.close() method with new one