Form - Modal Windows

From All n One's bxp software Wixi

Jump to: navigation, search

1 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 additional styling. There is code in bxp that can be used to create modal windows on forms.


2 Form Changes

To add a modal window, add a generic area to a form and add in two divs.

<div id='divMessage' class='white_content'></div>
<div id='divBackground' class='black_overlay'></div>

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



3 Event Handlers

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

<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()'>


4 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.


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';
}


5 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 code to create a sample button. The onclick event of the button will call 'fn_Show_Selection1()'.


<input type='button' name='btn_InfoBox' id='btn_InfoBox' value='Display Information Box' onclick='fn_Show_Selection1()'>

Afterwards you should see the following, if you click on your button: modal2.png

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


6 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.

<input type='button' name='btn_ModalTest' id='btn_ModalTest' value='Modal Testing' onclick='fn_Demo1();fn_AllnOne_Hide_Selection1()'>

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.

function fn_Demo1(){
	document.getElementById('strCDA_965_field_0_3').value = '1';
}

function fn_Demo2(){
	document.getElementById('strCDA_965_field_0_4').value = 'A';
}

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

modal6.png


7 Custom CSS

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

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

modal7.png


7.2 Linked Stylesheet

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:

modal4.png

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.