create a simple popup box

create a simple popup box

Today i will show you how to create a simple popup box with close button, no need 3th-party plugins, just one file html and jquery library.
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset='utf-8'/>
  6. <title>jQuery Popup Box Demo</title>
  7. <script src="jquery-1.9.0.min.js"></script>
  8. <script>
  9. $(document).ready(function(){
  10. $('h1').click(function(){ //you click into h1
  11. $('.hiddenbox').fadeIn(); //show popup box
  12. $('div:not(".hiddenbox")').hide(); //hide all elements except class hiddenbox
  13. $('.hiddenbox').appendTo('body'); //set class hiddenbox display as body
  14. })
  15. $('span.close').click(function(){ //you click close button
  16. $('.hiddenbox').fadeOut(); //close popup box
  17. $('body').appendTo('body');  // set body as body
  18. $('div:not(".hiddenbox")').show();  //show hidden elements
  19. });
  20. });
  21. </script>
  22. <style>
  23. .wrapper{width:100%;height:100%;background:rgba(38,35,35,0.5);}
  24. .hiddenbox{width:300px;height:300px;background:#000;margin:0 auto;overflow:hidden;display:none;opacity:none;} /*display:none is important part*/
  25. .close{width:10px;height:10px;background:red;cursor:pointer}
  26. h1{cursor:pointer}
  27. </style>
  28. </head>
  29. <body>
  30. <div class="wrapper" style="">
  31. <h1>click here to show Popup</h1>
  32. <div class="hiddenbox">
  33. <span class="close">close</span>
  34. </div>
  35. </div>
  36. </body>
  37. </html>


I got 99 problems but a bitch ain't one