Create custom popup in html, css and jQuery
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
margin:0px;
padding:0px;
}
.outer_quick_view_box {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.46);
justify-content: center;
display: none;
align-items: center;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
}
.quick_view_box{
width:70%;
height:70vh;
background:white;
}
.quick_view_close_bt {
color: #565454;
position: absolute;
top: 0px;
right: 0;
background: white;
border: 1px solid #8a8a8a;
border-radius: 50%;
padding: 11px;
margin: 40px;
cursor: pointer;
}
.quick_view_half_sec{
width:50%;
height:auto;
float:left;
}
</style>
<script>
jQuery(document).ready(function($){
$('.quick_view_close_bt').click(function(){
$('.outer_quick_view_box').hide();
});
$('.show_quick_view_bt').click(function(){
$('.outer_quick_view_box').show();
$('.outer_quick_view_box').css('display','flex');
});
});
</script>
</head>
<body>
<button class="show_quick_view_bt" >click me</button>
<div class="outer_quick_view_box" >
<div class="quick_view_close_bt">X</div>
<div class="quick_view_box">
</div>
</div>
</body>
</html>
No comments:
Post a Comment