Tuesday, July 22, 2014

Cheesie simple modal dialog

From time to time I have to work on projects where I have old versions of libraries, like jQuery, and I can't upgrade them. Yet, I need some features of libraries I like to use, like Bootstrap. This time, I needed a simple wait dialog that would show up, then go away when I needed it to. I'm working with jQuery 1.4.4 and jQueryUI is just too much for what I'm doing.

So, I found a great article on the web for a simple CSS positioned modal dialog.

http://blog.raventools.com/create-a-modal-dialog-using-css-and-javascript/

And my version is below. All I really changed is some styling, added a variable for content, which I'm setting statically, and have the styles inline instead of in a separate style sheet. This is a quick and dirty fix for a dying project. I've done a better version with bootstrap/angular but that's a different post :)