over 9 years ago
In this blog, we have created an example of a very simple and responsive jQuery popup box. Popup box is used frequently in the webpages for various purpose (Notification message, Alert message etc. ). If you need a simple and elegant responsive popup box, then this popup box will be really handy for you.
Below, we had mentioned the code and the zip folder for your usability.
- <!-- jQuery and jQuery Code -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(e) {
- $(".openBtn").click(function(){
- $(".web-popup-Container").show(500);
- });
- $(".btn-close").click(function(){
- $(".web-popup-Container").hide(500);
- });
- $(".popup-bgOverlay").click(function(){
- $(".web-popup-Container").hide(500);
- });
- })
- </script>
<!-- jQuery and jQuery Code --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $(".openBtn").click(function(){ $(".web-popup-Container").show(500); }); $(".btn-close").click(function(){ $(".web-popup-Container").hide(500); }); $(".popup-bgOverlay").click(function(){ $(".web-popup-Container").hide(500); }); }) </script>
- <div style="width:800px; margin:10px auto; background:#5e5e5e; padding:10px 10px;">
- <h2 class="noteTxt">Click on "Open Modal Popup" Button, to get the Popup.</h2>
- <button class="openBtn" >Open Modal Popup</button>
- </div>
- <!-- =Web Popup Container Start= -->
- <div class="web-popup-Container">
- <div class="popup-bgOverlay"></div>
- <!-- =Popup Box Frame Start= -->
- <div class="popup-box-frame">
- <div class="popup-title-Head">
- <h3 class="popup-heading">Popup Title</h3>
- <button class="btn-close">Close X</button>
- </div>
- <div class="popup-content-frame">
- <p>
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- </p>
- </div>
- </div><!-- =Popup Box Frame End//= -->
- </div><!-- =Web Popup Container End//= -->
<div style="width:800px; margin:10px auto; background:#5e5e5e; padding:10px 10px;"> <h2 class="noteTxt">Click on "Open Modal Popup" Button, to get the Popup.</h2> <button class="openBtn" >Open Modal Popup</button> </div> <!-- =Web Popup Container Start= --> <div class="web-popup-Container"> <div class="popup-bgOverlay"></div> <!-- =Popup Box Frame Start= --> <div class="popup-box-frame"> <div class="popup-title-Head"> <h3 class="popup-heading">Popup Title</h3> <button class="btn-close">Close X</button> </div> <div class="popup-content-frame"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div><!-- =Popup Box Frame End//= --> </div><!-- =Web Popup Container End//= -->
- .noteTxt{
- font-weight:400;
- color:#fff;
- font-size:18px;
- }
- .openBtn { cursor:pointer; }
- /****************************************
- Popup Style Elements
- *************/
- .web-popup-Container {
- width:100%;
- height:100%;
- top:0;
- position:fixed;
- z-index:5;
- display:none;
- }
- .web-popup-Container .popup-bgOverlay {
- width:100%;
- height:100%;
- position:fixed;
- opacity:0.8;
- -moz-opacity:0.8;
- -webkit-opacity: 0.8;
- background:#111;
- }
- .web-popup-Container .popup-box-frame {
- width:60%;
- max-height:500px;
- position:absolute;
- z-index:5;
- top:10%;
- left:20%;
- background:#fff;
- border-radius:6px 6px;
- -webkit-border-radius:6px 6px;
- -moz-border-radius:6px 6px;
- }
- .web-popup-Container .popup-box-frame .popup-title-Head {
- position:relative;
- padding:5px 10px;
- background:#069;
- border-radius:6px 6px 0 0;
- -webkit-border-radius:6px 6px 0 0;
- -moz-border-radius:6px 6px 0 0;
- }
- .popup-box-frame .popup-title-Head .popup-heading {
- font-size:18px;
- color:#fff;
- padding:6px ;
- margin:0;
- display:inline-block;
- }
- .popup-box-frame .popup-title-Head .btn-close {
- width:70px;
- position:absolute;
- right:10px;
- top:6px;
- }
- .popup-content-frame {
- padding: 10px 15px;
- }
- .popup-content-frame p {
- font-size:14px;
- line-height:20px;
- text-align:justify;
- }
.noteTxt{ font-weight:400; color:#fff; font-size:18px; } .openBtn { cursor:pointer; } /**************************************** Popup Style Elements *************/ .web-popup-Container { width:100%; height:100%; top:0; position:fixed; z-index:5; display:none; } .web-popup-Container .popup-bgOverlay { width:100%; height:100%; position:fixed; opacity:0.8; -moz-opacity:0.8; -webkit-opacity: 0.8; background:#111; } .web-popup-Container .popup-box-frame { width:60%; max-height:500px; position:absolute; z-index:5; top:10%; left:20%; background:#fff; border-radius:6px 6px; -webkit-border-radius:6px 6px; -moz-border-radius:6px 6px; } .web-popup-Container .popup-box-frame .popup-title-Head { position:relative; padding:5px 10px; background:#069; border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; -moz-border-radius:6px 6px 0 0; } .popup-box-frame .popup-title-Head .popup-heading { font-size:18px; color:#fff; padding:6px ; margin:0; display:inline-block; } .popup-box-frame .popup-title-Head .btn-close { width:70px; position:absolute; right:10px; top:6px; } .popup-content-frame { padding: 10px 15px; } .popup-content-frame p { font-size:14px; line-height:20px; text-align:justify; }
Below, I have also attached a Zip file (simple_responsive_popupBox.zip) with this blog. You can download the whole code packet for further use.
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)