DHTML Modal Window Widget - Pause Execution?

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.

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:

Code:

---

#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:

Code:

---

#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:

Code:

---

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:

Code:

---

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
},

---

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

@Nile,

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

Code:

---

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

---

Quote:

---

Originally Posted by rangana

@Nile,

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

Code:

---

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.

Quote:

---

Originally Posted by 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)>

---

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

Quote:

---

Originally Posted by Nile

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?!.:p

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. :(

No need for apologies Nile, just clearing things :)

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 ;-(

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

Quote:

---

Originally Posted by 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:

Code:

---

#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:

Code:

---

#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:

Code:

---

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:

Code:

---

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
},

---

---

But from looking at your answer it looks to me that you are providing a mthod for the veil to whiteout the parent page but I do not see how the code on the parent page will not continue to run.

Perhaps I am missing something but will the line of code after the one that opens the dialogue wait to execute until after the dialogue is dismissed?

You are absolutely right that everything will run. But it will just be covered up. If you have any alerts on the page, what you could do is set that alert to open when you click the "x" button?

Yes but ...

In my case PAGE B (a child or PAGE A) needs to invoke the dialogue but needs to do so thru PAGE A so that PAGE A is also covered/disabled. It is a function on PAGE B that needs to be executed when the dialgue closes but I am not sure how to do that.

Can I some way inside of PAGE A tell the dialgue to call a function that is on PAGE B?

You could do this, but it would require ajax to call one thing from another page.

Is that something that you provide me some direction on?

Thanks in advance.