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