DHTML Modal Window Widget - Pause Execution?

[MarekSukiennik]

1) Script Title:
DHTML Modal Window Widget

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

3) Describe problem:
I am using this tool and I am wondering if there is a way to "pause" execution of the next line of code until after the modal window is closed or hidden? If I recall correctly the definition of a modal window in the client/server days was a window that had to be dismissed before any other processing took place; that included the very next line of code after the window opened.

[Nile]

So, from what I understand, you want this to only display the window, until you close the window?


1) First step you wanna do is create a white pixel for an image named pixelw.png.

Then in the modal.css, find this:

#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}

And change it to this:

#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(pixelw.png);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
}

Then in the modal.js, find:

loadveil:function(){
	var d=dhtmlwindow
	d.getviewpoint()
	this.docheightcomplete=(d.standardbody.offsetHeight>d.standardbody.scrollHeight)? d.standardbody.offsetHeight : d.standardbody.scrollHeight
	this.interVeil.style.width=d.docwidth+"px" //set up veil over page
	this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
	this.interVeil.style.left=0 //Position veil over page
	this.interVeil.style.top=0 //Position veil over page
	this.interVeil.style.visibility="visible" //Show veil over page
	this.interVeil.style.display="block" //Show veil over page
},

And change it to:

loadveil:function(){
	var d=dhtmlwindow
	d.getviewpoint()
	this.docheightcomplete=(d.standardbody.offsetHeight>d.standardbody.scrollHeight)? d.standardbody.offsetHeight : d.standardbody.scrollHeight
	this.interVeil.style.width=d.docwidth+"px" //set up veil over page
	this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
	this.interVeil.style.left=0 //Position veil over page
	this.interVeil.style.top=0 //Position veil over page
	this.interVeil.style.visibility="visible" //Show veil over page
	this.interVeil.style.display="block" //Show veil over page
	document.body.style.overflow="none" //don't show scrollbars
},

[MarekSukiennik]

What I am after is functionality similar to what you would get if you open a modal dialogue in Windows Forms.

The modal dialogue is shown
The underlying form is also visible just no interaction can be done with it
No code in the parent form will execute until the modal dialogue is dismissed.

So in pseudo code ...

< Do something ...>
Open Modal Window
< Do something else ... this will not fire until the modal is dismissed(hidden perhaps)>

[rangana]

@Nile,

...could you also share us the reason behind removing this part:

filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);

[Nile]

@Nile,

...could you also share us the reason behind removing this part:

filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);

From my understanding, this is another one of the ways to give IE an opacity. Correct me if I'm wrong.

What I am after is functionality similar to what you would get if you open a modal dialogue in Windows Forms.

The modal dialogue is shown
The underlying form is also visible just no interaction can be done with it
No code in the parent form will execute until the modal dialogue is dismissed.

So in pseudo code ...

< Do something ...>
Open Modal Window
< Do something else ... this will not fire until the modal is dismissed(hidden perhaps)>

Would you be so kind to explain this a bet better?? I can't really understand it.

[rangana]

From my understanding, this is another one of the ways to give IE an opacity. Correct me if I'm wrong.

For IE6 specifically as IE7 uses filter:alpha(opacity=80).

..anyway, sorry to hijack the thread, no particular reason for doing so?!.

[Nile]

I really don't know, but I know that it has to do something with IE and opacity. It may be an IE Hack, I really don't know, sorry.

[rangana]

No need for apologies Nile, just clearing things

[MarekSukiennik]

OK ... what I am after is a way to not only prevent the user from interacting with the parent page but also not let any code that is after the opening of the modal dialogue exevute until it has been closed/hidden.

Perhaps I am going about this teh wrong way.

Here is my problem ...

PAGE A contains a TAB control with multiple tabs on it. One of the tabs contains PAGE B. Upon a button click in PAGE B I want to display a modal dialogue and once the modal dialogue is closed/hidden I want PAGE B to refresh. So what I am doing is opening the modal dialogue and the next line of code is to refresh PAGE B. The problem is that the line of code to do teh refresh is called right after the modal dialogue opens and not after it has been closed/hidden.

You would think that I could just use the OnClose function call BUT ...

To make it harder I am opening the modal dialogue from PAGE A by calling up to it via parent of PAGE B. The reason I am doing this is because I want the modal dialogue veil to cover both PAGE A and PAGE B.

Perhaps there is a way that I can have a function on PAGE B called when the modal dialogue that I open from PAGE A closes but I do not know how to ;-(

[Nile]

I'll read that in a sec, but can you tell me what the problem was with my answer at the top?

So, from what I understand, you want this to only display the window, until you close the window?


1) First step you wanna do is create a white pixel for an image named pixelw.png.

Then in the modal.css, find this:

#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(blackdot.gif);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);
opacity: 0.8;
}

And change it to this:

#interVeil{ /*CSS for veil that covers entire page while modal window is visible*/
position: absolute;
background: black url(pixelw.png);
width: 10px;
left: 0;
top: 0;
z-index: 5;
visibility: hidden;
}

Then in the modal.js, find:

loadveil:function(){
	var d=dhtmlwindow
	d.getviewpoint()
	this.docheightcomplete=(d.standardbody.offsetHeight>d.standardbody.scrollHeight)? d.standardbody.offsetHeight : d.standardbody.scrollHeight
	this.interVeil.style.width=d.docwidth+"px" //set up veil over page
	this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
	this.interVeil.style.left=0 //Position veil over page
	this.interVeil.style.top=0 //Position veil over page
	this.interVeil.style.visibility="visible" //Show veil over page
	this.interVeil.style.display="block" //Show veil over page
},

And change it to:

loadveil:function(){
	var d=dhtmlwindow
	d.getviewpoint()
	this.docheightcomplete=(d.standardbody.offsetHeight>d.standardbody.scrollHeight)? d.standardbody.offsetHeight : d.standardbody.scrollHeight
	this.interVeil.style.width=d.docwidth+"px" //set up veil over page
	this.interVeil.style.height=this.docheightcomplete+"px" //set up veil over page
	this.interVeil.style.left=0 //Position veil over page
	this.interVeil.style.top=0 //Position veil over page
	this.interVeil.style.visibility="visible" //Show veil over page
	this.interVeil.style.display="block" //Show veil over page
	document.body.style.overflow="none" //don't show scrollbars
},