标签：模态 style height width modal btn display
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>模态框</title> | |
| <style> | |
| header{ | |
| display: flex; | |
| } | |
| .login{ | |
| width: 50px; | |
| height: 15px; | |
| font-size: 12px; | |
| position: relative; | |
| top: 33px; | |
| left: 15px; | |
| color: rgb(102, 102, 231); | |
| cursor: pointer; | |
| } | |
| .modal{ | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(170, 164, 164, 0.6); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| display: none; | |
| } | |
| .content{ | |
| width: 400px; | |
| height: 150px; | |
| background-color: skyblue; | |
| color: white; | |
| } | |
| .close{ | |
| width: 95%; | |
| height: 20px; | |
| text-align: right; | |
| padding-right: 10px; | |
| cursor: pointer; | |
| } | |
| .desc{ | |
| width: 90%; | |
| height: 50px; | |
| line-height: 50px; | |
| padding-left: 10px; | |
| } | |
| .progress{ | |
| width: 90%; | |
| height: 20px; | |
| border: 3px solid white; | |
| position: relative; | |
| top: 5px; | |
| left: 17px; | |
| } | |
| .progress-bar{ | |
| width: 0%; | |
| height: 100%; | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h2>文章标题</h2> | |
| <div class="login">点击登录</div> | |
| </header> | |
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. In excepturi vitae molestiae ducimus ullam? Praesentium dolor, ad aliquam dolore eum dolorem vero quod officia alias perspiciatis eveniet rerum labore non exercitationem saepe quisquam! Quae, amet molestiae, excepturi odio expedita enim eum tenetur nihil suscipit exercitationem accusantium nisi. Aspernatur ipsam ducimus totam dolore quaerat sit quisquam cumque culpa, quo, est nemo alias repellat. Error consectetur esse ipsa et, aliquam iusto dolore repudiandae ipsum quos eum, eius enim fugiat! Fugit eveniet neque nostrum totam, itaque beatae ab velit architecto ipsa. Quae suscipit recusandae ratione dignissimos voluptatibus sed ex voluptate mollitia aperiam quod.</p> | |
| <div class="modal"> | |
| <div class="content"> | |
| <div class="close">X</div> | |
| <div class="desc">正在登录，请稍后...</div> | |
| <div class="progress"> | |
| <div class="progress-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // 获取DOM元素 | |
| let btn = document.getElementsByClassName("login")[0]; | |
| let modal = document.getElementsByClassName("modal")[0]; | |
| let close = document.getElementsByClassName("close")[0]; | |
| let bar = document.getElementsByClassName("progress-bar")[0]; | |
| let stopTimer,i = 1; // 设置计数器，初始值为1 | |
| let progress = function(){ | |
| bar.style.width = i + "%"; // 设置进度条的宽度 | |
| i++; // 宽度每次加1 | |
| // 如果大于100 说明进度条已经走满了 | |
| if(i > 100) | |
| { | |
| clearInterval(stopTimer); // 清除计时器函数 | |
| // 重置进度条的宽度以及计数器 | |
| bar.style.width = "0%"; | |
| i = 0; | |
| modal.style.display = "none"; // 关闭模态框 | |
| // 改变btn的内容和颜色 | |
| btn.innerHTML = "早上好"; | |
| btn.style.color = "black"; | |
| btn.style.cursor = "default"; | |
| btn.onclick = null; // 清除绑定在btn上面的点击事件 | |
| } | |
| } | |
| // 给按钮添加点击按钮 | |
| btn.onclick = function(){ | |
| if(btn.innerHTML === "点击登录") | |
| { | |
| modal.style.display = "flex"; // 将modal的display还原为flex，而不是block | |
| stopTimer = setInterval(progress,50); | |
| } | |
| } | |
| // 给关闭按钮添加点击按钮 | |
| close.onclick = function(){ | |
| // 清除定时器函数 重置进度条以及计数器 | |
| clearInterval(stopTimer); | |
| bar.style.width = "0%"; | |
| i = 0; | |
| // 关闭模态框 | |
| modal.style.display = "none"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
标签：模态,style,height,width,modal,btn,display 来源： https://www.cnblogs.com/qilin0/p/11512326.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。