css和js弹窗

朱雀 2022-09-30 15:00 152阅读 0赞

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>弹窗</title> <link rel="stylesheet" href=""> <script src='jQuery.js'></script> <style> .window{ display: none; } .active { display: block; } .showModel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; background: rgba(0, 0, 0, .3); filter: alpha(opacity=30); //兼容ie8 z-index: 999; } .inputbox { width: 755px; height: 425px; margin: 0 auto; text-align: center; } .mainBox { margin: 0 auto; text-align: center; position: fixed; z-index: 99999; top: 200px; filter: alpha(opacity=100); } .messBox { background-color: #ffffff; width: 755px; height: 295px; color: #ed6501; font-size: 24px; margin: 0 auto; padding-top: 37px; border-radius: 8px; filter: alpha(opacity=100); } .box1 { margin: 20px 0; } input { width: 391px; height: 32px; border-radius: 10px; background-color: #F4F4F4; border: 1px solid #8C8C8C; line-height: 32px; font-size: 16px; outline: none; } .tips { text-align: justify; width: 472px; height: 50px; color: #303030; font-size: 20px; margin: 0 auto; margin-top: 30px; line-height: 31px; } .commitBtn { width: 76px; height: 32px; margin: 0 auto; color: #FFF3CA; font-size: 20px; background-color: #ED6501; border-radius: 6px; line-height: 32px; text-align: center; margin-top: 30px; cursor: pointer; } .receive{ width: 100px; height: 60px; background-color: red; border: 1px solid blue; color: #fff; font-size: 20px; margin: 0 auto; text-align: center; line-height: 60px; } </style> </head> <body> <div class="receive"> 点我 </div> <div class="window ">  <div class="showModel"></div>  <div class="inputbox"> <div class="mainBox"> <div class="messBox"> <div class="box1"> <label>请输入您的手机号码:</label> <input type="text" id="phone"> </div> <div class="box2"> <label>请输入您的邮箱地址:</label> <input type="text" id="email"> </div> <div class="commitBtn">提交</div> </div> </div> </div> </div> <script> $(".receive").off().on('click',function(){ $(".window").addClass("active"); }); </script> </body> </html>