.box { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; } button { padding:10px 40px; cursor:pointer; outline:none; border-radius:6px; background:black; color:#fff; border:1px solid #f5f5f5; } .box button { display:block; margin:0 auto; margin-top:0px; } .popup { display:none; position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; background:rgba(0,0,0,0.6); } .popup.active { display:block; } .popup-content { width:300px; padding:20px; border-radius:6px; background:#fff; text-align:right; margin:0 auto; margin-top:50px; } .popup-content h3 { text-align:center; margin:0; } .popup-content p { text-align:left; border:1px solid #aaa; border-width:1px 0 1px 0; line-height:60px; margin:20px -20px; padding:0 20px; }
最实用简单弹出层效果。