Pop up control: jqModal Jquery modal pop-up

I was looking for a pop-up window like solution for a client.
It should support these options:

  • Add the pop-up content in the document (so the content would be loaded with the parent document)
  • Add the pop-up content on demand (when the uses clicks on it)
  • Close the pop-up with a button.

After a little searching i came across this control: the jqModal: Minimalist Modaling with jQuery

One thing beforehand: the word ‘minimalistic’ scared me; i thought this would be a replacement for ‘does not exactly what you want’, or something similar.
Well, i was wrong.

The first pleasant surprise was that the pop-up would disappear when clicked next to it.
I personally dislike pop-ups you have to close by clicking a button (most of the time very small and placed at a weird location).
So just clicking next tot the pop-up and making it pop-down felt good.

Then option 1: add the pop-up in the document.
Easy as 1,2, 3:
Add a div with the content (in my case, the content was put in by filling literals via the ASP.Net framework, but you could use any technology or plain text to set content in the div)

<div id="About" class="jqmWindow aboutPopUp" style="width: 300px; height: 250px;"></div>

No need to hide the div, just this script:

$().ready(function () {
    $('#About').jqm();
});

and a link off course, to click and show the pop-up (div, to be exact. Like most of the pop-up controls, the thing what happens is just a show / hide of a div).

<a onclick="$('#About').jqmShow();" href="#">About</a>

Then option 2: filling it on demand.
For some pop-ups which were not shown so often or with large content, we wanted it to load the content on demand.
And for that too, there is a simple solution: load the page with a Ajax call.
At the server, i implemented an aspx page which was called for all the pop-up’s, and would return the right html.
This html was not changed frequently so it was cached and thereby served quickly to the pop-up.
The same way a div element (now without content, which gets injected after the Ajax call)

<div style="width:300px;height:250px;" id="MoreInfoGeneral"></div>

and also a one liner for the setup:

$('#MoreInfoGeneral').jqm({ ajax: '/more-info/?section=MoreInfoGeneral' });

and the same code for the link to show / hide the pop-up, like in the first example (but off course with another div id).

And for option 3, for people who did not see the clicking next to the div to make it pop down as a natural thing to do, the close button.
Just add an image or link to pop down the pop-up:

<img id="imgPopupCloseButton" style="cursor: pointer;" onclick="HideJqmWindow('{DIVID}')" src="/Images/closeButton.png" alt="" width="20" />

(in this case, i injected the right id in the source at the placeholder'{DIVID}’ to reuse this line of code.

Ans there it is, an easy to use yet very well working pop-up control.

You can get it here http://dev.iceburg.net/jquery/jqModal/

One thought on “Pop up control: jqModal Jquery modal pop-up

  1. Cool,

    Good to see you didn’t forget you’ve a blog😉.

    I didn’t know about this Modal Dialog thing. I remember clients asking for it in the past. Will remember your blog post for future reference.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s