You want to add popup in your site, it is very easy to implement popup in your site just use given code.
<div class="overlay" id="over-flow">
</div>
<div class="main-box" id="compare-box">
<span class="close-btn" onclick="boxClose()">Close</span>
</div>
Add CSS in your css file.
<style>
.overlay{
display:none;
z-index:4;
position:fixed;
background:#000;
opacity:0.8;
left:0;
top:0;
right:0;
bottom:0;
}
.main-box{
display:none;
left:10px; top:10px; right:10px; bottom:10px;
background:#FDFFF4;
z-index:100;
color:#000;
position:absolute;
border:2px solid #ddd;
padding:5px;
}
.close-btn{
padding:5px 10px 5px 10px;
border-radius:5px;
cursor:pointer;
background:#ccc;
float:right;
font-family:verdana;
font-size:12px;
}
</style>
Add this script in your .js file.
<script>
function boxClose(){
$('#over-flow').hide();
$('#compare-box').hide();
}
function get_compare(){
$('#over-flow').show();
$('#compare-box').show();
}
</script>
Try this example:
<div class="overlay" id="over-flow">
</div>
<div class="main-box" id="compare-box">
<span class="close-btn" onclick="boxClose()">Close</span>
</div>
Add CSS in your css file.
<style>
.overlay{
display:none;
z-index:4;
position:fixed;
background:#000;
opacity:0.8;
left:0;
top:0;
right:0;
bottom:0;
}
.main-box{
display:none;
left:10px; top:10px; right:10px; bottom:10px;
background:#FDFFF4;
z-index:100;
color:#000;
position:absolute;
border:2px solid #ddd;
padding:5px;
}
.close-btn{
padding:5px 10px 5px 10px;
border-radius:5px;
cursor:pointer;
background:#ccc;
float:right;
font-family:verdana;
font-size:12px;
}
</style>
Add this script in your .js file.
<script>
function boxClose(){
$('#over-flow').hide();
$('#compare-box').hide();
}
function get_compare(){
$('#over-flow').show();
$('#compare-box').show();
}
</script>
Try this example:
Close
The example isn't working with firefox 20.
ReplyDelete