ModalPopup Sample in JavaScript

Mahak Gupta
Aug 26, 2012
23.3k
0
0
Article

To create a ModalPopup Property in JavaScript first we create an overlay screen for this, follow these steps:

Step 1

First we take two <div> tags in our program like this:

    <div id="light" class="white_show" style="width: 47%; left: 25%; top: 25%; height46%;">
    </div>
    <div id="fade" class="black_show">
        Mahak
    </div>

Step 2

Now we set the <style> tag in the <head> part of our program:

<style type="text/css">
    .black_show
    {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .90;
        filter: alpha(opacity=80);
    }
    .white_show
    {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 20%;
        padding: 16px;
        -webkit-border-radius: 20px;
        border: 16px solid orange;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
</style>

Step 3

After that we create a Button control to show the Overlay Screen like this:

<input id="Button1" type="button" value="Search" onclick="document.getElementById('fade').style.display='block';
document.getElementById('light').style.display='block'" />

After clicking on this button the output will be:

Step 4

Now we create a <p> tag:

<p id="p1">
As Prime Minister Manmohan Singh heads to Iran later this month to participate in
the NAM summit, he is likely to be pressed to take the Tehran line on Syria.</p>

Step 5

After that we write the following code:

    <div id="Div1" class="white_show" style="width: 47%; left: 25%; top: 25%; height46%;">
        <table>
            <tr>
                <td>
                    <b>Choose the font Style you would like:</b>
                    <br />
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    <a id="a1" onclick="ShowBold()">Bold</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a id="a2" onclick="ShowItalic()">Italic</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a id="a2" onclick="ShowNormal()">Normal</a>
                </td>
            </tr>
        </table>
    </div>

The output will be

In this program we want that when we click on the Bold, Italic and Underline, the font style of the paragraph (p1) will change.

Step 6

Now we write the code for the Bold (when we click on this the following function will be called).

function ShowBold()
{
    document.getElementById('fade').style.display = 'none';
    document.getElementById('light').style.display = 'none';
    document.getElementById('p1').style.fontWeight = 'Bold';
}

The output will be

Like this, we write the following code for Italic and Normal:

function ShowItalic()
{
    document.getElementById('fade').style.display = 'none';
    document.getElementById('light').style.display = 'none';
    document.getElementById('p1').style.fontStyle = 'Italic';
}
function ShowNormal()
{
    document.getElementById('fade').style.display = 'none';
    document.getElementById('light').style.display = 'none';
    document.getElementById('p1').style.fontStyle = 'Normal';
}