Sunday, October 7, 2012

How to create a modal window ?

All right, so i was working with modal , modal overlay and some other stuffs, when it came to my notice that till now no good tutorial is available for beginners to make them understand the whole process sequentially. So, yours truly took the initiative to write about the process to create a basic modal window .

NOTE : This entire effort has been implemented on a JSP but users can use it anywhere else .

Let me first give you some important information. I was configuring my tomcat 7 with my eclipse indigo, when i found  a lot of problems while trying to figure it out. I had not done this since the college days and it seems few things have changed. People who are interested in doing it can follow this link :  for configuring eclipse with tomcat 7(This is the best tutorial there is for that at present in www).

What is a dialogue ?

A dialog is a  default built-in behavior , but few methods are needed to control it pro-grammatically,  making this an easy to use widget that is also highly configurable and powerful.

What is a modal window ?

When your dialog box prevents the user from interacting  with the layout of the rest of your web page  if they don't close it manually, then it becomes your modal window.

So, how do we go about making it . Let me first give you the screen snaps for the code i had written :

Beware :

Whenever you are importing jquery.js and jquery-ui.js, remember to import jquery.js before jquery-ui.js, other wise you will get these errors :

jquery -- not recognized
('#id').dialog()  is not a function

Now let us understand the code that matters, shall we !

When you write :

$("#id").dialog(); -> you are actually trying to open a dialogue box and not a modal window, as you can still interact with the rest of the lay out of the page .

So how do i make it a modal window ?

Simple, to do this inside the dialog() method you have to provide --> modal : true. This tells the browser that you want the dialogue to be opened within a modal window to prohibit the user from interacting with the rest of the page.

But nobody will believe me if i don't show what it actually does . Okay, so let's see the screen shots below :

screen 1 : Before clicking on the blue date time link :

screen 2 : After clicking on the blue date time link :

Look at how the rest of the web page has become blurred and any attempt at trying to interact with the rest of the page will be a failure .

That's it for today folks.

I will see you all next time. Good bye .

No comments:

Post a Comment