Close button jquery

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<!--<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>-->
<style>
.form-group {
    margin-bottom: 15px;
}
.position-popup {
    position: absolute;
    left: 434px;
    top: 90px;
    width: 50%;
    height: 30%;
    z-index: 1;
}
.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #777;
    position: absolute;
    margin-left: -9px;
    top: 11px;
}
float {
    /* position: fixed; */
    background-color: white;
    color: #000;
    padding: 53px;
    border: 1px solid #777 !important;
    width: 100% !important;
    height: 100% !important;
    /* border: 1px solid #aaa; */
    /* border-radius: 4px; */
    padding: 60px 44px 14px;
    /* display: inline-block; */
    /* left: 34%; */
    /* width: 30%; */
}
</style>
</head>
<body>

<!--<p>This is a paragraph.<button>Toggle between slide up and slide down for a p element</button></p>-->

<div class="form-group col-md-4 col-xs-12 position-popup" >
                    <div class="arrow-left">
                    </div>
                    <div class="float">
                        <p>Change sailing date and passenger traveling from the dropdown.</p>
                        <div class="">
                            <button type="button" class="btn btn-default btn-sm close-float">Close</button>
                        </div>
                    </div>
                    <script>
                        $(document).ready(function(){
                         //  // Closing popover code
                         $(document).on('click', '.close-float', function() {
                             $('.float, .arrow-left').remove();
                         });

                        
                            window.scrollTo(0,( $('#rooms-available-header').offset().top - 280));
                            setTimeout(function(){ // Showing Popover code
                                $('.position-popup').show();
                            }, 2000);

                        
                         /*$(".close-nav").click(function(){
                            $(".remove-in").hide();
                        });

                         $(".show-nav").click(function(){
                            $(".remove-in").show();
                        });*/
                     });
                    </script>
</div>

</body>
</html>
Close button jquery

Follow

Newsletter
