Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML

JavaScript Modal Popup Window

Rate me:
Please Sign up or sign in to vote.
4.84/5 (48 votes)
15 May 2014CPOL3 min read 693.1K   39.4K   55   136
Flexible JavaScript Modal Popup Window
Image 1

Introduction

Nowadays, JavaScript Modal Popup window has become an intrinsic part of Web based application. Lately, I had a requirement where I needed to use Modal Popup Window. I Goggled for it and found many JQuery based Modal Popup Windows, but none of the code was fitting my needs.

So I decided to create my own Modal Popup window without using JQuery which should be easy to use and is flexible.

Using the Code

First, you need include ModalPopupWindow.js file in your web page as given below:

JavaScript
<script src="JavaScript/ModalPopupWindow.js"
type="text/javascript"></script>

Once you have included the JS file, you need to create an instance of ModalPopUpWindow. For that, you need to write the below mentioned code:

JavaScript
modalWin = new CreateModalPopUpObject();

modalWin object provides three functions to create three types of modal windows which are mentioned below:

  • ShowMessage
  • ShowConfirmationMessage
  • ShowURL

ShowMessage

ShowMessage can be used when you want to show some information to the user:

Image 2

JavaScript
ShowMessage(message, height, width, title)

ShowMessage function takes four parameters:

  • Message: Message that you need to display to the user
  • Height: Height of the message window
  • Width: Width of message window
  • Title: Title of the window

Syntax for calling is as follows:

JavaScript
modalWin.ShowMessage('This Modal Popup Window using Javascript',200,400,'User Information');

ShowConfirmationMessage

ShowConfirmationMessage window can be used where you want to take confirmation from user:

Image 3

JavaScript
ShowConfirmationMessage(message, height,
            width, title, onCloseCallBack, firstButtonText, onFirstButtonClick, secondButtonText,
            onSecondButtonClick)

ShowConfirmationMessage function takes eight parameters:

message, height, width, title parameters are already described above.

  • onCloseCallBack (optional): Name of the function that will get called on confirmation window close
  • firstButtonText: Text that needs to be displayed on first button (like Yes, Agree, OK, etc.)
  • onFirstButtonClick: Name of the function that will get called on click of first button.
  • secondButtonText: Text that needs to be displayed on second button (like Yes, Agree, OK, etc.)
  • onSecondButtonClick: Name of the function that will get called on click of second button

Syntax for calling is as given below:

JavaScript
modalWin.ShowConfirmationMessage('This
           Modal Popup Window using Javascript',200,400,'User Confirmation',
           null,'Agree',Action1,'Disagree',Action2);

ShowURL

ShowURL function can be used when you want to display a new page or URL in Modal popup window.

Image 4

JavaScript
ShowURL(url, height, width, title,
           onCloseCallBack, callbackFunctionArray)

height, width, title, onCloseCallBack are already described above.

  • url: Location or URL of the web page
  • callbackFunctionArray (optional): Using this parameter, you can pass array of function of parent page to the child page inside Modal Window. So that child page can access function of parent page.

Syntax for calling is as follows:

JavaScript
var callbackFunctionArray = new Array(EnrollNow,
EnrollLater);

modalWin.ShowURL('Child.htm',320,470,'User
Enrollment',null,callbackFunctionArray);   

SetButtonStyle

You can change the button style using function SetButtonStyle. Sometimes, you may want to show button as link, in that case you can use this function. Below is an example to show buttons as link.

Image 5

JavaScript
SetButtonStyle(btnStyle)
  • btnStyle: is semicolon separated styles for buttons. The naming convention for the styles should be like JavaScript not like CSS style. For example in CSS, we use "text-decoration" and in JavaScript, we use "textDecoration". So, please make sure while passing styles that you are using JavaScript naming convention.

Syntax for calling is as given below:

JavaScript
modalWin.SetButtonStyle("background:none;border:none;textDecoration:underline;cursor:pointer");

Dragging Window

By default ModalPopUpWindow is draggable, for dragging window you need press mouse over window title bar and drag. In case you don’t want window to be draggable, then you can use Draggable property of ModalPopUpWindow. You need to set this property every time just before calling any show function of ModalPopUpWindow to make it un-draggable

Image 6

Syntax for making window un-draggable is given below:

JavaScript
modalWin.Draggable=false;
modalWin.ShowMessage('You can not drag this window',200,400,'User Information');

Passing Values From Modal Popup Child Window To Parent Window

Sometimes, we may need to pass values from child modal window to parent window while using "ShowURL" function of modal window. In JavaScript, we can use window.parent for accessing parent window elements/functions. So we can use the same (window.parent) for passing value from child popup window to parent window. You can find example of the same in the attached demo code where clicking on "Show URL Window" will show up popup window and when you will click on "Enroll Now" button, it will pass values of child window to parent window as shown in below screenshots:

Image 7

Image 8

Summary

In the attached source code, you will find examples for all the scenarios described in this tip. Apart from that, you can modify the source code depending on your requirement.

History

  • Updated source code version v4 for supporting IE11 on 20-Nov-2013

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Developer

Comments and Discussions

 
QuestionSuperb!!! Pin
Ashutosh Phoujdar25-Jul-14 22:38
Ashutosh Phoujdar25-Jul-14 22:38 
AnswerRe: Superb!!! Pin
Mahesh Bailwal26-Jul-14 23:10
Mahesh Bailwal26-Jul-14 23:10 
Questionparamter from parent to child Pin
Mansouri Mohamed23-Jul-14 4:10
Mansouri Mohamed23-Jul-14 4:10 
AnswerRe: paramter from parent to child Pin
Mahesh Bailwal26-Jul-14 23:06
Mahesh Bailwal26-Jul-14 23:06 
SuggestionVery handy modal popup window Pin
Harm-Jan17-Jul-14 23:53
professionalHarm-Jan17-Jul-14 23:53 
GeneralRe: Very handy modal popup window Pin
Mahesh Bailwal26-Jul-14 22:50
Mahesh Bailwal26-Jul-14 22:50 
QuestionGray back ground on the model is not properly arranged Pin
rinu00791123-Jun-14 23:37
rinu00791123-Jun-14 23:37 
AnswerRe: Gray back ground on the model is not properly arranged Pin
rinu00791124-Jun-14 2:14
rinu00791124-Jun-14 2:14 
is there any chance to reduce the height of the table's heading

modalWin.ShowURL('Child.htm',320,470,'UniqueID',null,callbackFunctionArray);
AnswerRe: Gray back ground on the model is not properly arranged Pin
Mahesh Bailwal26-Jul-14 22:48
Mahesh Bailwal26-Jul-14 22:48 
Question404 error on GET Blank.htm Pin
Member 1083766422-May-14 9:23
Member 1083766422-May-14 9:23 
AnswerRe: 404 error on GET Blank.htm Pin
Mahesh Bailwal22-May-14 20:19
Mahesh Bailwal22-May-14 20:19 
GeneralRe: 404 error on GET Blank.htm Pin
vic534-Aug-14 13:10
professionalvic534-Aug-14 13:10 
QuestionDoes not works in Google Chrome Pin
Member 196873017-May-14 23:52
Member 196873017-May-14 23:52 
AnswerRe: Does not works in Google Chrome Pin
Mahesh Bailwal18-May-14 3:17
Mahesh Bailwal18-May-14 3:17 
GeneralRe: Does not works in Google Chrome Pin
Member 196873018-May-14 15:21
Member 196873018-May-14 15:21 
GeneralRe: Does not works in Google Chrome Pin
Member 196873018-May-14 15:24
Member 196873018-May-14 15:24 
GeneralRe: Does not works in Google Chrome Pin
Member 109913745-Aug-14 8:22
Member 109913745-Aug-14 8:22 
GeneralRe: Does not works in Google Chrome Pin
Member 196873018-May-14 15:32
Member 196873018-May-14 15:32 
GeneralRe: Does not works in Google Chrome Pin
Mahesh Bailwal18-May-14 18:58
Mahesh Bailwal18-May-14 18:58 
Questionshowing multiple url Pin
rajeshmsen2-May-14 3:06
rajeshmsen2-May-14 3:06 
AnswerRe: showing multiple url Pin
Mahesh Bailwal3-May-14 2:47
Mahesh Bailwal3-May-14 2:47 
QuestionHow to call window modal with button server side (asp.net)? Pin
carlosrenatofreire19-Apr-14 1:08
carlosrenatofreire19-Apr-14 1:08 
AnswerRe: How to call window modal with button server side (asp.net)? Pin
Mahesh Bailwal19-Apr-14 3:34
Mahesh Bailwal19-Apr-14 3:34 
QuestionCan I change the popup CSS ? Pin
Member 1063894110-Apr-14 1:00
Member 1063894110-Apr-14 1:00 
AnswerRe: Can I change the popup CSS ? Pin
Mahesh Bailwal11-Apr-14 3:43
Mahesh Bailwal11-Apr-14 3:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.