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:
  1. <div id="light" class="white_show" style="width: 47%; left: 25%; top: 25%; height46%;">  
  2. </div>  
  3. <div id="fade" class="black_show">  
  4.     Mahak  
  5. </div> 
Step 2
 
Now we set the <style> tag in the <head> part of our program:
  1. <style type="text/css">  
  2.     .black_show  
  3.     {  
  4.         display: none;  
  5.         position: absolute;  
  6.         top: 0%;  
  7.         left: 0%;  
  8.         width: 100%;  
  9.         height: 100%;  
  10.         background-color: black;  
  11.         z-index: 1001;  
  12.         -moz-opacity: 0.8;  
  13.         opacity: .90;  
  14.         filter: alpha(opacity=80);  
  15.     }  
  16.     .white_show  
  17.     {  
  18.         display: none;  
  19.         position: absolute;  
  20.         top: 25%;  
  21.         left: 25%;  
  22.         width: 50%;  
  23.         height: 20%;  
  24.         padding: 16px;  
  25.         -webkit-border-radius: 20px;  
  26.         border: 16px solid orange;  
  27.         background-color: white;  
  28.         z-index: 1002;  
  29.         overflow: auto;  
  30.     }  
  31. </style> 
Step 3
 
After that we create a Button control to show the Overlay Screen like this:
  1. <input id="Button1" type="button" value="Search" onclick="document.getElementById('fade').style.display='block';  
  2.                                                                                             document.getElementById('light').style.display='block'" /> 
After clicking on this button the output will be:
 
1.gif
 
Step 4
 
Now we create a <p> tag:
  1. <p id="p1">  
  2.         As Prime Minister Manmohan Singh heads to Iran later this month to participate in  
  3.         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:
 
  1. <div id="Div1" class="white_show" style="width: 47%; left: 25%; top: 25%; height46%;">  
  2.         <table>  
  3.             <tr>  
  4.                 <td>  
  5.                     <b>Choose the font Style you would like:</b>  
  6.                     <br />  
  7.                     <br />  
  8.                 </td>  
  9.             </tr>  
  10.             <tr>  
  11.                 <td>  
  12.                     <a id="a1" onclick="ShowBold()">Bold</a>  
  13.                 </td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <td>  
  17.                     <a id="a2" onclick="ShowItalic()">Italic</a>  
  18.                 </td>  
  19.             </tr>  
  20.             <tr>  
  21.                 <td>  
  22.                     <a id="a2" onclick="ShowNormal()">Normal</a>  
  23.                 </td>  
  24.             </tr>  
  25.         </table>  
  26.     </div> 
The output will be
 
2.gif
 
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).
  1. function ShowBold()  
  2. {  
  3.     document.getElementById('fade').style.display = 'none';  
  4.     document.getElementById('light').style.display = 'none';  
  5.     document.getElementById('p1').style.fontWeight = 'Bold';  
  6. } 
The output will be
 
3.gif
 
Like this, we write the following code for Italic and Normal:
  1. function ShowItalic()  
  2. {  
  3.     document.getElementById('fade').style.display = 'none';  
  4.     document.getElementById('light').style.display = 'none';  
  5.     document.getElementById('p1').style.fontStyle = 'Italic';  
  6. }  
  7. function ShowNormal()  
  8. {  
  9.     document.getElementById('fade').style.display = 'none';  
  10.     document.getElementById('light').style.display = 'none';  
  11.     document.getElementById('p1').style.fontStyle = 'Normal';  
  12. } 


Similar Articles