Lert: the multi-button JavaScript alert/confirm box
The other day a co-worker was asking if it was possible to add additional buttons to the JavaScript confirm box. As far as I knew it wasn’t possible, but there was another option, and probably one that’s a lot cooler and more useful: make our own alert/confirm box. I planned it all out in my head the next morning while cutting greens at the golf course, and hacked a working version together while I was eating my dinner later that day.
So here’s the quick and dirty script. Use it as you please.
The quick features list is:
- Floating ‘window’ with darkened background a la lightbox.js.
- Specifying a defaultButton will execute that button event when the ‘enter/return’ key is pressed.
- Styled using CSS so you can edit it as necessary.
- Asynchronous event triggering similar to an AJAX call. Events are specified using anonymous functions passed into the LertButton() object and triggered when then associated button is clicked.
Remember, I wrote this quickly while I was eating so it’s not a perfect OO solution and is a little hacky. I’ll improve upon it when I get a chance.
9 Comments »
RSS feed for comments on this post. | TrackBack URI
Your confirm box looks great, but i cant make the redirect work in explorer, even your example doesnt work properly in explorer
oh my… i have found the solution just after i made the comment
button.setAttribute(’href’,'#’);
fixed it
Thanks. I did notice that problem but hadn’t had time to track it down. I’ll fix the code when I get a sec.
Where does button.setAttribute(’href’,’#’); get placed in the script?
In the getDom method. The posted source shoud be fixed now.
Hey, i am having trouble using this script on a submit button, lert appears for a second then form is sent automatically.
Is there a way to use Lert with the window.onunload event? Coz the confirm box doesn’t stop the page from redirecting. If there’s any work arounds please let me know… Thanks!
I love the script, but am having difficulty with my forms with select boxes. The select boxes shine through and over the alert box in IE6. I have been reading about using iframes as a way to prevent this, but cant seem to implement it. Do you have anyother suggestions, seeing as IE6 is a widely used browser, this IE bug makes lert difficult to use.
Looks great in firefox
Hi! Nice script. It’s very professional. I had did a script seems yours: http://tmferreira.pandela.org/blog-english/2007/07/18/personalize-alert-and-confirm-javascript-functions-using-jquery/
But my, rewrites the alert and confirm functions.
Bye.
tmferreira