jQuery – Playing Around With Modal

During the development of my most recent project, I used some modal implementations on jQuery. It was mostly for showing progress or prompting users for action that should not be missed.

Only when needed

There are two scenarios when I’ve used modal on my project. The first one was to tell the user to wait for a long process to complete. It is a multiple-file CSV import with multiple checking and adding to database. It usually takes a maximum of 10 seconds. I just pop-up a modal window with a message and a GIF image (spinner) to indicate a long process. It works great!

The second one is a bit more than necessary. The process was to scan chips with barcode on it. The operator must be very fast to finish as many chips as possible. Each scanned chips is added to the database.

Sometimes, when there are errors on the scanned chip (such as lacking digits) the old alert message (JavaScript’s alert) is simply cancelled by the barcode scanner’s last character CARRIAGE RETURN, thus cancelling the message without the operator knowing about it.

To solve that issue, I use modal window and that only a certain key (I used F1) can be used to close the modal window. So that would be my example. A simple Modal window that is using jQuery’s jqModal.

The Code

Grab the latest jqModal plugin from jQuery: jqModal Plugin

For the sake of our example, I will just demonstrate how to use the modal. The one I used on the project. Below is my HTML markup.

<div id="scan_msg" class="jqmWindow">
	<div class="title">
		<div class="text">
			<span>Title here</span>
		</div>
		<div class="img">
			<img src="../lib/images/cancel.gif" alt="close" />
		</div>
	</div>
	<div class="sbody">
		<p>This is the body, a message here.</p>
	</div>
	<div class="sbtn">
		<input type="button" name="scan_msg_btn" id="scan_msg_btn" value="OK (F1)" />
	</div>
</div>
[/html]

And this is the link that will launch the modal window.


<h2><a href="#" id="modal_link">Click here to view modal</a></h2>

We are going to use jqModal’s CSS for the overlay and other stuff.
The location is on my web server: http://blog.lysender.com/samples/lib/css/jqModal.css

Of course we will also style our modal div. So here is the style (sorry, I copied them directly from my project so it may contain styles not needed for this sample):

/** Modal Window Message **/
#scan_msg,
#scan_pass {
	width: 300px;
	background-color: #FFFFFF;
	border: solid 2px #7083a1;
}
#scan_msg .title,
#scan_pass .title {
	float: left;
	width: 300px;
	background-color: #5379b6;
	color: #DDDDDD;
	font-weight: bold;
}
#scan_msg .title .text,
#scan_pass .title .text {
	float: left;
	width: 190px;	
}
#scan_msg .title .text span,
#scan_pass .title .text span {
	padding-left: 10px;	
}
#scan_msg .title .img,
#scan_pass .title .img {
	float: right;
	width: 50px;
	text-align: right;
}
#scan_msg .sbody,
#scan_pass .sbody {
	float: left;
	width: 300px;	
}
#scan_msg .sbody p,
#scan_pass .sbody p {
	margin: 10px;
	text-align: center;
}
#scan_msg .sbtn,
#scan_pass .sbtn {
	float: left;
	width: 300px;
	text-align: center;
	padding-bottom: 20px;
	padding-top: 5px;
}
#scan_msg .sbtn input,
#scan_pass .sbtn input {
	width: 80px;
	height: 25px;	
}

Then here comes the JavaScript code:

$(function(){
	//Initialize modal window
	$("#scan_msg").jqm({overlay: 50, modal: true, trigger: false});

	//bind click even on close button, to close the modal div
	$("#scan_msg .title .img").click(function(){
		$("#scan_msg").jqmHide();
	});
	
	//bind click event to launch the modal div
	$("#modal_link").click(function(){
		$("#scan_msg").jqmShow();
	});
});

Other stuff are found on the demo page.

Click here to view the demo.