一个简单的弹窗 发表于 2018-03-06 | 更新于 2023-01-11 原来只用css也可以写出来一个漂亮的弹窗 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<!DOCTYPE html><html><head> <title></title> <style type='text/css'> .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity .5s; visibility: hidden; opacity: 0; z-index: 10000 } .overlay:target { visibility: visible; opacity: 1; } .modal { min-width:400px; max-width: 45%; position: relative; margin: auto; padding: 1.5rem; background: #fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; transition: .5s; opacity: 0; transform: scale(1.1); } .overlay:target > .modal { transform: translateY(60%) scale(1); transition-timing-function: cubic-bezier(0.8, 0, 0, 1.5); opacity: 1; }</style></head><body> <div class='overlay' id='pop'> <div class='modal'> <a href='#'>关闭</a> </div> </div> <a href='#pop'>显示</a></body></html>