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