As we have got java script issue while we are working on a website in which we are using so many java scripts. So, in these types of cases, addition of a new pop-up to fulfill the requirement will take more than expected time. Now, we will learn about Make a pop-up without using java script. It is a simple HTML and CSS pop-up, which is very easy to implement in any of our web page. And here is the output:
1. First, write the following css to the webpage :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <style type="text/css"> body { color: #333333; font-family: 'Helvetica', arial; height:1500px; } .wrap { padding: 40px; text-align: center; } .mybutton { background: #428bca; border: #357ebd solid 1px; border-radius: 3px; color: #fff; display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative; transition: color .1s ease; } .mybutton:hover { background: #357ebd; } .mybutton.mybutton-big { font-size: 18px; padding: 15px 20px; min-width: 100px; } .mybutton-close { color: #aaaaaa; font-size: 15px; text-decoration: none; position: absolute; right: 10px; top: 10px; } .mybutton-close:hover { color: #919191; } .popup_div:before { content: ""; display: none; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .popup_div:target:before, .popup_div.loaded:before { display: block; } .popup_div-dialog { background: #fefefe; border: #333333 solid 1px; border-radius: 5px; margin-left: -200px; position: fixed; left: 50%; top: -100%; z-index: 11; width: 360px; -webkit-transform: translate(0, -500%); -ms-transform: translate(0, -500%); transform: translate(0, -500%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .popup_div-body { padding: 20px; } .popup_div-top { padding: 10px 20px; } .popup_div-bottom{ padding: 5px 20px 10px 20px; } .popup_div-top { border-bottom: #eeeeee solid 1px; } .popup_div-top h2 { font-size: 20px; } .popup_div:target .popup_div-dialog, .popup_div.loaded .popup_div-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); top: 20%; } .popup_div-bottom { border-top: #eeeeee solid 1px; text-align: center; } .popup_div-body input{width:100%;padding:10px;margin-bottom:20px;} .bottomcontent{font-size:12px;} </style> |
Adding Html to your desired location :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class="wrap"> <a href="#pop-content" class="mybutton mybutton-big">Pop Up!</a> </div> <!-- popup_div --> <div class="popup_div" id="pop-content" aria-hidden="true"> <div class="popup_div-dialog"> <div class="popup_div-top"> <h2>Simple CSS Pop-up</h2> <a href="#" class="mybutton-close" aria-hidden="true">close</a> </div> <div class="popup_div-body"> <p>This is the body part of the content, where we can add any form,any html and image as well according to your requirement.</p> <form action="#" method="post" name="myform"> <input type="text" name="name" placeholder="Name" /><br/> <input type="text" name="email" placeholder="Email" /><br/> <input type="submit" value="Submit" class="mybutton"/> </form> </div> <div class="popup_div-bottom"> <p class="bottomcontent">Pop-up by Sunil Chaudhary</p> </div> </div> </div> |
Finally, refresh your web page and click on Pop up button. You can modify it as per your needs.
Choose the Best Web Hosting
HostForLIFEASP.NET is recognized as one of the Best, Cheap Web Hosting Provider in UK. You can always start from their start from €3.00/month and this plan has supported WordPress, Joomla, Drupal, Umbraco, etc with one-click installer, within less than 5 minutes. They provide cheap, best and instant activation on your WordPress Hosting hosting account with UNLIMITED Bandwidth, Diskspace and Domain.
