Post
Ask Question

ModalPopup Sample in JavaScript

Introduction

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%; height: 46%;">  
</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: 0.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.

Overall Screen

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%; height: 46%;">
    <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.

Bold, Italic, Underline

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.

Output

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


Similar Articles