Quick tutorial

This is a quick tutorial to show how to implement the modalScreen (MoSc) object in any web project, lets start.

The first step is to include 2 required files, the object script and the styles:

<script type="text/javascript" src="modalScreen.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="modalScreenStyle.css">

Then we should declare a script to create the MoSc.

<script type="text/javascript"></script>

Create a new instance is easy, only call the constructor and store the new instance in a variable to handle it later.

var MoSc = new modalScreen("MoSc");

Then, we can specify the content by 2 ways, from any file, or from text.

// From file
MoSc.setContenFile('modalScreenContent.php');
// From text
MoSc.setContentText('<div style="width: 100px; height: 40px; text-align: center">Content From String</div>');

In the first case we can specify some POST arguments like in the next example:

MoSc.setContenFile('modalScreenContent.php','message=loaded%20from%20file&title=modalScreen%20content');

And finally we need to call to the show(); function to display the screen, maybe from a button.

<input type="button" value="Display" onclick="MoSc.show();"/>

The object can be closed calling to the close(); function or defining the modalScreen as click closable (the object will be closed when click on the lock screen) as follows:

MoSc.setClickClosable(true);

Now you are ready to use modalScreen, remember you can create multiple instances of the object in the same file; and the content from file can have scripts, styles and hypertext. have Fun.