How to pop up a div using a hyperlink in asp.net using java script and CSS
In this article, I have used two click button and
two pop up div , Frist I have you Hyperlink with under line and second is
without under line. Both have the same feature that they are able close with a
close button or escape button.
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 and html
on aspx page
Source Code:-
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';
}
// To detect escape button
document.onkeydown = function (event) {
event = event || window.event;
if
(event.keyCode == 27) {
hide('popDiv');
}
if
(event.keyCode == 27) {
hide('popDiv1');
}
};
</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 first 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
first popup div</a>
</center>
<div id="popDiv1" class="ontop">
<div id="popup" class="content">
<img alt='quit' class='x' src="images/quit.png" id='Img1' onclick="hide('popDiv1')" />
<h2> *******
Welcome in code soltion *******</h2>
<br />
This is Second 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('popDiv1')" style="text-decoration:none;">Click here to open second popup div</a>
</center>
</body>
</html>
Output:-
How to pop up a div using a hyperlink in asp.net using java script and CSS
Reviewed by NEERAJ SRIVASTAVA
on
7:05:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
7:05:00 PM
Rating:
No comments: