Click here to Skip to main content
12,396,461 members (70,057 online)
Click here to Skip to main content
Add your own
alternative version

Stats

289.8K views
32.9K downloads
52 bookmarked
Posted

JavaScript Modal Popup Window

, 15 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Flexible JavaScript Modal Popup Window

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:

<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:

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:

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:

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:

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:

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.

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:

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.

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:

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

Syntax for making window un-draggable is given below:

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:

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)

Share

About the Author

Mahesh Bailwal
Software Developer (Senior)
India India
Developer

You may also be interested in...

Comments and Discussions

 
QuestionUnable to call modal popup box on a script Pin
Member 1259762122-Jun-16 0:08
memberMember 1259762122-Jun-16 0:08 
QuestionUse modal window from NavBar link Pin
Member 1239772820-Mar-16 17:07
memberMember 1239772820-Mar-16 17:07 
GeneralMy vote of 5 Pin
willichan7-Nov-15 9:23
memberwillichan7-Nov-15 9:23 
QuestionTitle bar color Pin
Member 83846644-Nov-15 8:57
memberMember 83846644-Nov-15 8:57 
AnswerRe: Title bar color Pin
Carsten V2.027-Dec-15 1:10
memberCarsten V2.027-Dec-15 1:10 
QuestionHelp to use your code with another. Pin
jasancorts8-Oct-15 19:09
memberjasancorts8-Oct-15 19:09 
GeneralThanks a lot. You save my day. Pin
Jennie Lay25-Sep-15 1:03
memberJennie Lay25-Sep-15 1:03 
QuestionPosition the modal Pin
Wombaticus20-Sep-15 4:41
memberWombaticus20-Sep-15 4:41 
Question0x800a1391 - JavaScript runtime error: 'bailwal_modalPopupWindow' is undefined Pin
Pong God18-Sep-15 6:34
memberPong God18-Sep-15 6:34 
AnswerRe: 0x800a1391 - JavaScript runtime error: 'bailwal_modalPopupWindow' is undefined Pin
Pong God18-Sep-15 12:31
memberPong God18-Sep-15 12:31 
Questionparent variable Pin
Member 1151064730-Mar-15 21:06
memberMember 1151064730-Mar-15 21:06 
QuestionModal Popup Window returns to top of page Pin
Member 114898183-Mar-15 21:42
memberMember 114898183-Mar-15 21:42 
QuestionRegarding MOdal popup Pin
Member 110211898-Feb-15 23:26
memberMember 110211898-Feb-15 23:26 
QuestionIs there away to detect if the modal is finished loading? Pin
Member 947787826-Jan-15 5:35
memberMember 947787826-Jan-15 5:35 
QuestionHow to position the pop up window Pin
Member 1112994115-Jan-15 18:31
memberMember 1112994115-Jan-15 18:31 
GeneralThanks I love what you have done. Pin
Member 1136943814-Jan-15 1:20
memberMember 1136943814-Jan-15 1:20 
QuestionResponssive design implementation. Pin
Member 1101171731-Dec-14 3:56
memberMember 1101171731-Dec-14 3:56 
AnswerRe: Responssive design implementation. Pin
Mahesh Bailwal9-Jan-15 19:03
memberMahesh Bailwal9-Jan-15 19:03 
QuestionValues not populating in google chrome Pin
Member 1118598528-Oct-14 0:24
memberMember 1118598528-Oct-14 0:24 
AnswerRe: Values not populating in google chrome Pin
Member 1118364628-Oct-14 0:29
memberMember 1118364628-Oct-14 0:29 
GeneralRe: Values not populating in google chrome Pin
Member 1118598528-Oct-14 1:05
memberMember 1118598528-Oct-14 1:05 
GeneralRe: Values not populating in google chrome Pin
Member 1118364628-Oct-14 3:48
memberMember 1118364628-Oct-14 3:48 
GeneralHow to postition the window using left and top value Pin
Member 1118364627-Oct-14 22:23
memberMember 1118364627-Oct-14 22:23 
GeneralRe: How to postition the window using left and top value Pin
Mahesh Bailwal29-Oct-14 5:17
memberMahesh Bailwal29-Oct-14 5:17 
QuestionHow to get true or false on press Agree in confirmation window Pin
nishhu0717-Oct-14 2:44
membernishhu0717-Oct-14 2:44 
AnswerRe: How to get true or false on press Agree in confirmation window Pin
Mahesh Bailwal18-Oct-14 6:04
memberMahesh Bailwal18-Oct-14 6:04 
GeneralRe: How to get true or false on press Agree in confirmation window Pin
nishhu0731-Oct-14 3:08
membernishhu0731-Oct-14 3:08 
QuestionShow URL window cannot close by itself? Pin
Member 111299415-Oct-14 14:09
memberMember 111299415-Oct-14 14:09 
AnswerRe: Show URL window cannot close by itself? Pin
Mahesh Bailwal6-Oct-14 8:28
memberMahesh Bailwal6-Oct-14 8:28 
GeneralRe: Show URL window cannot close by itself? Pin
Member 111299416-Oct-14 9:34
memberMember 111299416-Oct-14 9:34 
GeneralRe: Show URL window cannot close by itself? Pin
Mahesh Bailwal7-Oct-14 7:40
memberMahesh Bailwal7-Oct-14 7:40 
GeneralRe: Show URL window cannot close by itself? Pin
Member 111299417-Oct-14 9:17
memberMember 111299417-Oct-14 9:17 
GeneralRe: Show URL window cannot close by itself? Pin
Mahesh Bailwal10-Oct-14 22:08
memberMahesh Bailwal10-Oct-14 22:08 
QuestionPopup Is Not Modal and Page is Cleared by ShowConfirmationMessage Pin
CdlBob10-Sep-14 12:48
memberCdlBob10-Sep-14 12:48 
AnswerRe: Popup Is Not Modal and Page is Cleared by ShowConfirmationMessage Pin
Mahesh Bailwal11-Sep-14 2:49
memberMahesh Bailwal11-Sep-14 2:49 
GeneralRe: Popup Is Not Modal and Page is Cleared by ShowConfirmationMessage Pin
jeetendra keshri116-Sep-15 7:01
memberjeetendra keshri116-Sep-15 7:01 
Questionclose button Pin
Megan Ramarama3-Sep-14 21:07
memberMegan Ramarama3-Sep-14 21:07 
QuestionResizable Property Pin
akhtar.shahbaz120-Aug-14 3:36
memberakhtar.shahbaz120-Aug-14 3:36 
AnswerRe: Resizable Property Pin
Mahesh Bailwal21-Aug-14 18:23
memberMahesh Bailwal21-Aug-14 18:23 
GeneralRe: Resizable Property Pin
akhtar.shahbaz121-Aug-14 21:34
memberakhtar.shahbaz121-Aug-14 21:34 
GeneralRe: Resizable Property Pin
Mahesh Bailwal23-Aug-14 20:37
memberMahesh Bailwal23-Aug-14 20:37 
GeneralRe: Resizable Property Pin
akhtar.shahbaz11-Sep-14 20:03
professionalakhtar.shahbaz11-Sep-14 20:03 
GeneralLimitations Pin
Member 1101348014-Aug-14 14:11
memberMember 1101348014-Aug-14 14:11 
GeneralRe: Limitations Pin
Mahesh Bailwal14-Aug-14 20:47
memberMahesh Bailwal14-Aug-14 20:47 
QuestionI am searching where is blank.htm ..in the script it is there... Pin
vic533-Aug-14 10:41
membervic533-Aug-14 10:41 
AnswerRe: I am searching where is blank.htm ..in the script it is there... Pin
Mahesh Bailwal4-Aug-14 3:43
memberMahesh Bailwal4-Aug-14 3:43 
QuestionSuperb!!! Pin
Ashutosh Phoujdar25-Jul-14 22:38
memberAshutosh Phoujdar25-Jul-14 22:38 
AnswerRe: Superb!!! Pin
Mahesh Bailwal26-Jul-14 23:10
memberMahesh Bailwal26-Jul-14 23:10 
Questionparamter from parent to child Pin
Mansouri Mohamed23-Jul-14 4:10
memberMansouri Mohamed23-Jul-14 4:10 
AnswerRe: paramter from parent to child Pin
Mahesh Bailwal26-Jul-14 23:06
memberMahesh Bailwal26-Jul-14 23:06 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 15 May 2014
Article Copyright 2013 by Mahesh Bailwal
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid