"Make a Popup/Modal Window without JavaScript"
Bootstrap 4.1.1 Snippet by 高级放牛娃

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <h1>Popup/Modal Window without JavaScript</h1> <div class="box"> <a class="button" href="#popup1">Click Here to open Pop Up</a> </div> <button type="button" class="btn btn-success" id="target">Success</button> <div id="popup1" class="overlay"> <div class="popup"> <h2>Example Pop Up</h2> <a class="close" href="#">×</a> <div class="content"> Thank to pop me out of that button, but now i'm done so you can close this window. <ul > <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> </div> </div> </body>
body { font-family: Arial, sans-serif; background: url(http://amitchaudhary.in/images/testimonials.jpg) no-repeat; background-size: cover; height: 100vh; } h1 { text-align: center; font-family: Tahoma, Arial, sans-serif; color: #FF9800; margin: 80px 0; } .box { width: 50%; margin: 0 auto; background: rgba(53, 52, 52, 0.2); padding: 50px; border: 2px solid #fff; background-clip: padding-box; text-align: center; } .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #FF9800; border-radius: 20px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: #06D85F; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } }
$(document).ready(function() { $("#target").click(function(){ //alert("准备显示窗口."); $("#popup1").show(); }); });

Related: See More


Questions / Comments: