Jump to content

Making a truely modal dialog


ShadowMage
 Share

Recommended Posts

Is it possible to replicate the behavior of the built-in alert, confirm, and prompt dialogs? Where script execution completely halts until the user has clicked 'OK'.I built a custom dialog script which uses callback functions to simulate this behavior, but now I've come across a situation where that isn't going to work. I also wrote a custom "embedded window" script that generates draggable "windows" using div elements. I've created several custom events which fire when certain functions are called. One of these is the onclose event. What I want to do is to use my custom dialog box to ask the user whether they want to close the window. Problem is, my custom dialog does not return a value and I don't know how to make it do so.Maybe some code would help.Here's the function that closes the window:

buttons[x].onclick = function() {	var exec = true;	if ((me.onclose !== null) && (typeof(me.onclose) == 'function')) {		exec = me.onclose.apply(me, []);	}	if (exec || (exec === undefined)) {		me.hide();		me.isOpen = false;	}}

As you can see, this checks if the onclose function is set and executes it, taking the return value and using that to see if the window should be closed.My confirm function uses callbacks to execute code when a user makes a selection. Something like this:

dialog.confirm("Are you sure?", function(res) {	(res)?this.alert("You pressed 'Yes'", 1):this.alert("You pressed 'No'", 1);}, "Yes/No");

Doing something like this will obviously not work:

testWindow.onclose = function() { //testWindow is an instance of my custom "window" class	return dialog.confirm("Are you sure?", function(res) {		return res;	}, "Yes/No");}

because the confirm function relies on the callback and therefore doesn't return anything. And the callback does not return its value back up the scope.So what I though I could do was make the confirm function synchronous, where it would pause until the user makes a choice, and still use the callback to set a value which I could then return. Something like:

testWindow.onclose = function() { //testWindow is an instance of my custom "window" class	var close;	return dialog.confirm("Are you sure?", function(res) {		close = res;	}, "Yes/No");	return close;}

Any advice would be greatly appreciated.

Link to comment
Share on other sites

There may be browser-specific ways to pause code (Firebug's console does it), but I'm not aware of a cross-browser way to stop execution. How would execution start again? You could run some code to start execution again, but if execution is paused you can't run anything to unpause it. When I need a dialog like that I use the built-in ones.

Link to comment
Share on other sites

How would execution start again? You could run some code to start execution again, but if execution is paused you can't run anything to unpause it.
Hmm...good point. Never really thought about that.
When I need a dialog like that I use the built-in ones.
Looks like this is going to have to be my solution as well...it just won't fit in with the theme, that's all. I wanted to use my custom dialog so it matched the rest of the dialogs in the application...oh well... :)Seems like I always try to do the impossible....:)
Link to comment
Share on other sites

it just won't fit in with the theme
I hope future JS specs allow you to apply custom styles to browser elements, like the alert, confirm and input boxes. Did you know that certain elements are actually created with HTML and CSS? It's called the Shadow DOM. It would be great if CSS had access to the shadow DOM.
Link to comment
Share on other sites

I hope future JS specs allow you to apply custom styles to browser elements, like the alert, confirm and input boxes. Did you know that certain elements are actually created with HTML and CSS? It's called the Shadow DOM. It would be great if CSS had access to the shadow DOM.
only the shadow knows what objects lurk in the hearts of documents... :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...