版权声明:仅仅菜鸟,愿帮到工作中预bug困惑的您 https://blog.csdn.net/weixin_41716259/article/details/82772278
//html
<div class="waitwinref"> <div class="waitla"> <div class="layer"></div> <div class="waitshow"> <p>您确定要拒绝订单?</p> <div class="encal"> <a id="cancel" href="javascript:void(0);">取消</a> <a id="ensure" href="javascript:void(0);">确定</a> </div> </div> </div> </div>
//css
/*弹窗*/ /*遮罩层*/ .layer { background: rgba(0, 0, 0, 0.45); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .waitwinref{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } .waitla{ width:1200px; overflow:hidden; margin: 0 auto; } .waitshow{ width: 200px; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 4px; background: #fff; position: absolute; top: 32%; left: 50%; margin-left: -8%; z-index: 2; } .waitshow p{ line-height:50px; text-align:center; font-size:14px; color:red; } .waitshow .encal{ text-align:center; margin-bottom:16px; } #cancel,#ensure{ display:inline-block; width:50px; height:30px; line-height:30px; background: #3aa3ff; margin:10px 10px 0 10px; color:white; border-radius: 2px; }