Anonymous, bureaucrat, administrator
7,528
edits
Changes
no edit summary
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 additional styling. There is a lot of code in bxp that can be used to create modal windows on forms.
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">
The next step is to add in event handlers and functionality to show and hide the divs. The first step is to add in Add two buttons into 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 Change the names and values to suit refer to your form:
<syntaxhighlight lang="javascript" line start="1">
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 JavaScript to hide each of the divs.
<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';
}
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>
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.
The second option for adding custom CSS is to create a CSS sheet and add it to the onload sectin 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:
[[File:modal5.png]]
This will create a basic example of a customised modal box. The javscript JavScript and layout can be further edited and enhanced to fit a user's specific needs.
[[Category:Module Specific:Form MnagementManagement]]