<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css实现弹窗</title> <style> * { margin: 0; padding: 0; font-size: 14px; font-family: Arial, Helvetica, sans-serif } .button { background: bisque; color: #fff; padding: 10px 25px; } .modal>input { display: none; } .modal>input~* { overflow: hidden; max-height: 0; opacity: 0 } .modal .overlay { top: 0; left: 0; bottom: 0; right: 0; position: fixed; margin: 0; border-radius: 0; background: rgba(17, 17, 17, 0.6); transition: all 0.3s; z-index: 100000; } .modal .overlay~* { border: 0; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2); z-index: 1000000; transition: all .3s ease; } .main { background: #fff; padding: 10px; } .modal>input:checked~* { display: block; opacity: 1; max-height: 10000px; } .modal>input:checked~.overlay~* { max-height: 90%; overflow: auto; -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1); transform: translateX(-50%) translateY(-50%) scale(1, 1); } </style> </head> <body> <label for="modal_1" class="button">显示模态框</label> <div class="modal"> <input type="checkbox" name="" id="modal_1"> <label for="modal_1" class="overlay"></label> <div class="main"> <p> We have a special offer for you. I am sure you will love it! However this does look spammy... </p> </div> </div> </body> </html>
纯css3实现弹窗：参考链接https://picnicss.com/documentation#modal