Scroll to top

How to create custom popup in html, css and jQuery?


Notice: Undefined variable: string in /home/u665484253/domains/wpcodekit.com/public_html/wp-content/themes/twentytwenty-child/functions.php on line 61

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>

Get more information

Read More Posts

Leave a Reply

Your email address will not be published.