Form - Modal Windows - Revision history

Philip Lacey at 09:09, 29 August 2016

2016-08-29T09:09:20Z

Meabh Landers at 15:23, 24 August 2016

2016-08-24T15:23:05Z

Meabh Landers: Tutorial for creating javascript modal windows

2016-08-24T15:16:42Z

Tutorial for creating javascript modal windows

New page

= Introduction =

A modal window in javascript is a small window that appears on-screen and temporarily disables the main window until the modal window is interacted with. It looks very similar to an information box but with added styling. There is a lot of code in bxp that can be used to create modal windows on forms.

= Form Changes =

To add a modal window, the first thing to do is to add a generic area to a form and add in two divs.

<syntaxhighlight lang="javascript" line start="1">
<div id='divMessage' class='white_content'></div>
<div id='divBackground' class='black_overlay'></div>
</syntaxhighlight>

divMessage is the information box that appears on screen and the class “white_content” contains styling to keep it centred.
divBackground is a div that will encompass the whole screen area, the class “black_overlay” will darken everything other than the information box and make it unclickable while the information box is open.
Add some sample text inside divMessage, this is the information that will appear in the modal window..

= Event Handlers =

The next step is to add in event handlers and functionality to show and hide the divs. The first step is to add in two buttons into the modal window which will hide the window when clicked and allow the user to interact with other elements on screen.

The next step is to add in the HTML for two buttons into divMessage. The user will have to click one of these buttons to remove the information box from the screen. Add in the following code to the inner HTML of divMessage. You can change the names and values to suit your form:

<syntaxhighlight lang="javascript" line start="1">
<input type='button' name='btn_ModalTest' id='btn_ModalTest' value='Modal Testing' onclick='fn_AllnOne_Hide_Selection1()'>
<input type='button' name='btn_ModalTest2' id='btn_ModalTest2' value='Modal Testing' onclick='fn_AllnOne_Hide_Selection1()'>
</syntaxhighlight>

= Javascript =

We now need to define the two functions for showing and hiding the two divs. The first function is called "fn_AllnOne_Hide_Selection1()" and hides the two divs. Go to notepad++ and create a new function in a brand new file with this name. Add in two lines of javascript to hide each of the divs.

Add another function called “fn_Show_Selection1()” which will show the two divs.

When the two divs are displayed, the main screen will appear darkened and a user will not be able to interact with any elements; the modal window will be displayed in the center of the screen. When the divs are hidden, the form will appear as normal.

<syntaxhighlight lang="javascript" line start="1">
function fn_AllnOne_Hide_Selection1(){
document.getElementById('divMessage').style.display = 'none';
document.getElementById('divBackground').style.display = 'none';
}

function fn_Show_Selection1(){
document.getElementById('divMessage').style.display = 'inline';
document.getElementById('divBackground').style.display = 'inline';
}
</syntaxhighlight>

= Triggering the Information Box =

The next step is to call the function fn_Show_Selection1() to display the information box. To trigger this event, add a generic area to the form. Edit the generic area and add in some code to create a sample button. The onclick event of the button will call 'fn_Show_Selection1()'.

<syntaxhighlight lang="javascript" line start="1">
<input type='button' name='btn_InfoBox' id='btn_InfoBox' value='Display Information Box' onclick='fn_Show_Selection1()'>
</syntaxhighlight>

Afterwards you should see the following if you click on your button:
[[File:modal2.png]]

If you click on either of the two buttons in the message then the message will be hidden and the black overlay will be removed.

= Adding Functionality =

You can trigger certain events and form changes when the user clicks either of the buttons. You can add an extra function to the onclick event where you hide the divs.
<syntaxhighlight lang="javascript" line start="1">
<input type='button' name='btn_ModalTest' id='btn_ModalTest' value='Modal Testing' onclick='fn_Demo1();fn_AllnOne_Hide_Selection1()'>
</syntaxhighlight>

The function “fn_Demo1()” can be implemented in the main javascript on load section. The following example shows how each button can update different elements on the form.
<syntaxhighlight lang="javascript" line start="1">
function fn_Demo1(){
document.getElementById('strCDA_965_field_0_3').value = '1';
}

function fn_Demo2(){
document.getElementById('strCDA_965_field_0_4').value = 'A';
}
</syntaxhighlight>

In the below screenshot you can see how each field is updated by the code.

[[File:modal6.png]]

= Custom CSS =
== Inline ==

There are a few different methods for adding custom CSS to the modal window. One option is to add inline CSS to the div for the information box and to add inline html and CSS elements to style the contents.

The below example will change the border colour and style. Add it to the generic area with the divs:

<syntaxhighlight lang="javascript" line start="1">
<div id='divMessage' class='white_content' style='border: 5pt green solid;'>
Test message
<input type='button' name='btn_ModalTest' id='btn_ModalTest' value='Modal Testing' onclick='fn_Demo1();fn_AllnOne_Hide_Selection1()'>
<input type='button' name='btn_ModalTest2' id='btn_ModalTest2' value='Modal Testing' onclick='fn_Demo2();fn_AllnOne_Hide_Selection1()'>
</div>
<div id='divBackground' class='black_overlay'></div>
</syntaxhighlight>

[[File:modal7.png]]

==Linked Stylesheet==

The second option for adding custom CSS is to create a CSS sheet and add it to the onload sectin of the form. This option can overwrite elements of the white_content or black overlay classes and it can style new elements the user has added to the modal class.
Please see a simple example below of how to add a CSS sheet that changes the style of the writing and how to link it:

[[File:modal4.png]]

[[File:modal5.png]]

This will create a basic example of a customised modal box. The javscript and layout can be further edited and enhanced to fit a user's specific needs.

[[Category:Module Specific:Form Mnagement]]

← Older revision		Revision as of 15:23, 24 August 2016
Line 140:		Line 140:


−	[[Category:Module Specific:Form ~~Mnagement~~]]	+	[[Category:Module Specific:Form Management]]

@@ Line 2: / Line 2: @@
-A modal window in javascript is a small window that appears on-screen and temporarily disables the main window until the modal window is interacted with. It looks very similar to an information box but with added styling. There is a lot of code in bxp that can be used to create modal windows on forms.
+A modal window in javascript is a small window that appears on-screen and temporarily disables the main window until the modal window is interacted with. It looks very similar to an information box but with additional styling. There is code in bxp that can be used to create modal windows on forms.
@@ Line 9: / Line 9: @@
-To add a modal window, the first thing to do is to add a generic area to a form and add in two divs.
+To add a modal window, add a generic area to a form and add in two divs.
 <syntaxhighlight lang="javascript" line start="1">
@@ Line 26: / Line 26: @@
-The next step is to add in event handlers and functionality to show and hide the divs. The first step is to add in two buttons into the modal window which will hide the window when clicked and allow the user to interact with other elements on screen.
+The next step is to add in event handlers and functionality to show and hide the divs. Add two buttons to the modal window which will hide the window when clicked and allow the user to interact with other elements on screen.
-The next step is to add in the HTML for two buttons into divMessage. The user will have to click one of these buttons to remove the information box from the screen. Add in the following code to the inner HTML of divMessage. You can change the names and values to suit your form:
+The next step is to add the HTML for two buttons into divMessage. The user will have to click one of these buttons to remove the information box from the screen. Add the following code to the inner HTML of divMessage. Change the names and values to refer to your form:
 <syntaxhighlight lang="javascript" line start="1">
@@ Line 41: / Line 41: @@
-We now need to define the two functions for showing and hiding the two divs. The first function is called "fn_AllnOne_Hide_Selection1()" and hides the two divs. Go to notepad++ and create a new function in a brand new file with this name. Add in two lines of javascript to hide each of the divs.
+We now need to define the two functions for showing and hiding the two divs. The first function is called "fn_AllnOne_Hide_Selection1()" and hides the two divs. Go to notepad++ and create a new function in a brand new file with this name. Add in two lines of JavaScript to hide each of the divs.
@@ Line 52: / Line 52: @@
 <syntaxhighlight lang="javascript" line start="1">
 function fn_AllnOne_Hide_Selection1(){
-	document.getElementById('divMessage').style.display		= 'none';
+	document.getElementById('divMessage').style.display	= 'none';
 	document.getElementById('divBackground').style.display	= 'none';
+}
 function fn_Show_Selection1(){
-	document.getElementById('divMessage').style.display		= 'inline';
+	document.getElementById('divMessage').style.display	= 'inline';
 	document.getElementById('divBackground').style.display	= 'inline';
+}
@@ Line 67: / Line 67: @@
-The next step is to call the function fn_Show_Selection1() to display the information box. To trigger this event, add a generic area to the form. Edit the generic area and add in some code to create a sample button. The onclick event of the button will call 'fn_Show_Selection1()'.
+The next step is to call the function fn_Show_Selection1() to display the information box. To trigger this event, add a generic area to the form. Edit the generic area and add in code to create a sample button. The onclick event of the button will call 'fn_Show_Selection1()'.
@@ Line 74: / Line 74: @@
 </syntaxhighlight>
-Afterwards you should see the following if you click on your button:
+Afterwards you should see the following, if you click on your button:
 [[File:modal2.png]]
-If you click on either of the two buttons in the message then the message will be hidden and the black overlay will be removed.
+If you click on either of the two buttons in the message, the message will be hidden and the black overlay will be removed.
@@ Line 129: / Line 129: @@
-The second option for adding custom CSS is to create a CSS sheet and add it to the onload sectin of the form. This option can overwrite elements of the white_content or black overlay classes and it can style new elements the user has added to the modal class.
+The second option for adding custom CSS is to create a CSS sheet and add it to the onload section of the form. This option can overwrite elements of the white_content or black overlay classes and it can style new elements the user has added to the modal class.
 Please see a simple example below of how to add a CSS sheet that changes the style of the writing and how to link it:
@@ Line 136: / Line 136: @@
 [[File:modal5.png]]
-This will create a basic example of a customised modal box. The javscript and layout can be further edited and enhanced to fit a user's specific needs.
+This will create a basic example of a customised modal box. The JavScript and layout can be further edited and enhanced to fit a user's specific needs.
 [[Category:Module Specific:Form Management]]