While building dynamic web pages
popups are useful for showing information of inputs other than content that is
shown on page. Mostly html alert popup is used to some info like 'alerts or
information for website'. But when development needs popup that do multiple
things with multiple formats, alert box is not enough.
In this case we need a custom pop up that satisfy our need. We can see
that there are many jquery plugin that provide custom popup. But they come
with external js & css files with complex format to implement. That is why
I want to built my own custom popup.
We will build this with ‘div’ in html, which will be hidden on page
load. After clicking on link this popup
will be shown by jquery. The code is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
.popup-back
{
float: left;
background-color:
rgba(51, 51, 51, 0.71);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display:none;
z-index:10000;
}
.popup-con {
margin: auto;
width: 600px;
position: relative;
}
.popup-body {
background-color:
#fff;
padding: 10px;
position: absolute;
width: 100%;
top: 100px;
}
a.close-popup {
font-family: arial;
text-decoration: none;
background-color: #333;
color: #fff;
border-radius: 50%;
height: 21px;
position: absolute;
width: 20px;
text-align: center;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<h1>Pop ups</h1>
<a href="#" class="link-class popup-link" rel="my_popup1">popup
1</a>
<a href="#" class="link-class popup-link" rel="my_popup2">popup
2</a>
<div class="popup-back popup-spclass" id="my_popup1">
<div class="popup-con">
<div class="popup-body">
<a href="#" class="close-popup">✕</a>
<h1>this is my 1st popup</h1>
<p>Simple way for popup</p>
</div>
</div>
</div>
<div class="popup-back popup-spclass" id="my_popup2">
<div class="popup-con">
<div class="popup-body">
<a href="#" class="close-popup">✕</a>
<h1>this is my 2nd popup</h1>
<p>Simple way for popup</p>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(".popup-link").click(function () {
var
popupId = "#" + $(this).attr("rel");
$(popupId).fadeIn();
});
$(".close-popup").click(function () {
$(".popup-spclass").fadeOut();
});
</script>
</body>
</html>
|
No comments:
Post a Comment