Sometimes you have a little detail you’d like the user to specify, but you don’t want to leave the page. That’s when modal windows can come in handy.
Since i’ve now switched to jQuery completely, i’m using a nice jQuery plugin: jqModal
- first thing is to download the jqModal script and css, and reference them in the head of your page.
- then, you choose an element in your page that is going to add as trigger, for instance a link (handy if you want to load in a page using ajax):
1 2 3
- you need a div or span in your page that’s going to be used as placeholder to contain your content (notice the jqmWindow class):
- then, the script itself, wonderfully simple, to be loaded when the document is ready (see jQuery manuals):
1 2 3 4 5
- If you want to submit the form with Ajax, you can add a callback function (onLoad:ajaxify for instance) in the previous code. That callback function should then catch the submit event, and make sure the submit is done with Ajax.
In one case, this formula doesn’t cut it: when you’ve got to upload a file. Ajax doesn’t upload file, multipart or no multipart. I’ll give one possible workaround in next post.