主要使用到::target伪类,::before 、::after伪元素 以及display: flex;盒子用来居中,最后用position: fixed;绝对定位来让弹窗固定 <a href="#example1">立即下载</a> <div class="popBox" id="example1"> <div class="khbox"> <a href="#" class="close" ></a> <span id="boxtitle">账号登录</span> <form action="#" enctype="multipart/form-data" method="post" class="tc_form"> <input type="text" name="contacts" class="tp2" id="name" value="" placeholder="账号"> <input type="text" name="mobile" class="tp2" id="phone" value="" placeholder="请输入您的密码"> <p class="tc_p">xxx保障您的信息不会泄露。</p> <input type="submit" name="submit" value="立 即 注 册" class="khbtn" > </form> </div> </div> css: /*弹窗遮罩层*/ .popBox::before { content: ""; cursor: default; background-color: rgba(173, 173, 173, 0.66); position: fixed; left: 0; right: 0; top: 0; bottom: 0; } /*关闭弹窗*/ .popBox { display: none; } /*打开弹窗*/ .popBox:target { align-items: center; display: flex; justify-content: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } /*设置弹窗内容*/ .popBox .khbox { background-color: rgb(255 255 255 / 76%); border-radius: 5px; padding: 1.5rem; position: relative; width: 25rem; } /*关闭按钮*/ .popBox .close { display: block; position: relative; } .popBox .close::after { align-items: center; color: black; content: "×"; display: flex; font-size: 2.25rem; justify-content: center; position: absolute; right: -2rem; top: -2.14rem; height: 2rem; width: 2rem; z-index: 2; } span#boxtitle { font-weight: bold; text-align: center; width: 100%; height: auto; display: inline-block; font-size: 25px; } form.tc_form { margin-top: 15px; text-align: center; } input.tp2 { width: 60%; height: 35px; margin-bottom: 15px; padding-left: 5px; background-color: #f2f2f2; border: 1px solid #bdbdbd; } input.khbtn { width: 60%; height: 48px; margin-top: 10px; } input.khbtn:hover { color: white; background-color: #0276e7; border: 1px solid; font-weight: bold; }
最后为了
转载联系作者并注明出处:https://focusonseo.cn/cassas/56.html