How to create pop up div in asp.net using java script and CSS
In this article, I am creating a pop up div that are
open on hyperlink. I have also provide the all format of the div just content,
font , hyperlink and so on . I have used properly CSS ,Java Script and html on aspx page
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="poupdiv.aspx.cs" Inherits="poupdiv" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popup div
with disabled background</title>
<style>
.ontop
{
z-index:
100;
width:
100%;
height:
100%;
top:
0;
left:
0;
display:
none;
position:
fixed;
color:
#aaaaaa;
filter:
alpha(opacity = 70);
background-color:
#000;
-moz-opacity:
0.7;
-khtml-opacity:
0.7;
opacity:
0.7;
display:
none;
}
#popup
{
width:
300px;
height:
200px;
position:
absolute;
color:
#000000;
background-color:
#ffffff; /* To
align popup window at the center of screen*/
top:
50%;
left:
50%;
margin-top:
-100px;
margin-left:
-150px;
}
.content
a
{
text-decoration:
none;
}
.content
{
min-width:
600px;
width:
600px;
min-height:
150px;
margin:
100px auto;
background:
#f3f3f3;
position:
relative;
z-index:
103;
padding:
10px;
border-radius:
5px;
box-shadow:
0 2px 5px #000;
}
.content
p
{
clear:
both;
color:
#555555;
text-align:
justify;
}
.content
p a
{
color:
#d91900;
font-weight:
bold;
}
.content
.x
{
float:
right;
height:
35px;
left:
22px;
position:
relative;
top:
-25px;
width:
34px;
}
.content
.x:hover
{
cursor:
pointer;
}
</style>
<script type="text/javascript">
function
pop(div) {
document.getElementById(div).style.display
= 'block';
}
function
hide(div) {
document.getElementById(div).style.display = 'none';
}
</script>
</head>
<body>
<div id="popDiv" class="ontop">
<div id="popup" class="content">
<img alt='quit' class='x' src="images/quit.png" id='x' onclick="hide('popDiv')" />
<h2> *******
Welcome in code soltion *******</h2>
<br />
This is pop up div using java
script and CSS
<br />
<br />
<b> you can also
use escape button for close it
</b>
</div>
</div>
<center>
<br />
<a href="#" onclick="pop('popDiv')">Click here to open popup
div</a>
</center>
</body>
</html>
Out:put:-
How to create pop up div in asp.net using java script and CSS
Reviewed by NEERAJ SRIVASTAVA
on
6:31:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
6:31:00 PM
Rating:
No comments: