Simple pop Up for J-query..

Simple pop Up  for J-query..

 

For Supporting Documents.

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

HTML Code

<div class="background">
<div class="forground"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAJMOWhXkBuYWaTvZ0itfL3T2jbyWWY_X6gFkfsOS9t1G1nNRzGors1zq2vlU3tcQhv2mQZ9um5CPCpAObnvV3586Z7YPCz_JkP79n7Owjw8wwH2EgIiHnefpaAJdBjY8yUChFBCAm7pYO/s1600/IMG_20131002_183944.jpg"/>
<div class="crss"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div>

<div class="btttttn btn btn-danger">Pop Up !</div>


CSS Code

.background{ width:100%; height:100%; position:fixed; left:0px; top:0px; display:none;}

.background:before{width:100%; height:100%; background-color:rgba(0,0,0,.5); position:absolute; top:0px; left:0px; content:'';} 

.forground{background-color: #fffd4b; border: 2px solid #8f8e03; border-radius: 7px; height: 450px; left: 50%; padding: 10px; position: absolute; top: 50%; width: 830px; z-index: 100; transform: translate(-50%, -50%);

-webkit-transform:translate(-50%,-50%);}

.forground img{ width:100%; height:100%; display:block;}

 .crss{background-color: #3a3a3a; border-radius: 50%; color: #ffffff; font-size: 25px; height: 40px; padding-left: 10px; padding-top: 5px; position: absolute; right: -17px; top: -7px; width: 40px; cursor:pointer;} 

.btttttn{ float:left; position:absolute; left:150px; top:100px; z-index:1;}

Js Code

<script type="text/javascript">

$(document).ready(function() {

$('.btttttn').click(function(){

$('.background').fadeIn(1000);

});

$('.crss').click(function(){

$('.background').stop().fadeOut(1000)

});

});

</script>