Monday, November 12, 2012

A jQuery popup modal dialog

These days I needed to display a form in HTML. The simplest way to do this would be just go to another page, where the form would be displayed, then go back to the previous page after the submit. But the form had only a couple fields to use a whole page, and also it felt too cumbersome to go back and forth with the pages. Or I could use an ordinary window popup, but since it’s a modeless window, problems would easily arise.

So, with the aid of jQuery, I wrote a small jQuery plugin to use an ordinary hidden DIV as a popup modal dialog, so that I’d just have to keep the form into a DIV, and it would be shown without leave the current page. At some point, it saw that the OK and Cancel buttons could be automated themselves, so my form would need just the fields.

I also took the opportunity and used the same engine to generate automatic OK and OK/Cancel dialogs, thus beautifying the alert and confirm JavaScript stock functions. Worth mentioning that the popup can be stacked, that is, a modal popup can open another modal popup, and so on.

It ended up helping me a lot, so I published it on GitHub at rodrigocfd/jquery-modalForm, along with an example file.

No comments: