Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位的类型-实现一个模态框
Blogger Information
Blog 70
fans 1
comment 0
visits 52950
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
定位的类型-实现一个模态框
葡萄枝子
Original
697 people have browsed it

定位的类型-实现一个模态框

  1. 简述定位的类型与应用场景和使用条件
  2. 模仿课堂案例，实现一个模态框

1. 简述定位的类型与应用场景和使用条件

四种定位类型和属性

  • position:static 静态定位，默认属性，与文档流源码顺序一致
  • position:relative 相对定位，相对于文档流原始位置的偏移
  • position:absolute 绝对定位，相对祖先最近定位元素原始位置的偏移，若没有祖先定位元素，则相对于根 html 的偏移，绝对定位元素会脱离文档流
  • position:fixed 固定定位，绝对定位的一个特例，是相对于根 html 的偏移

元素中有 position:relative 和 position:absolute 就是一个定位元素

转为定位元素 position:relative，它内部的元素就相对于它进行绝对定位

固定定位 position:absolute 可应用于 在线客服，广告位等

2. 模仿课堂案例，实现一个模态框

  • 模仿模态框
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>模仿课堂案例，实现一个模态框</title>
  8.     <link rel="stylesheet" href="css/modal.css">
  9. </head>
  11. <body>
  12.     <header>
  13.         <h2>我的博客</h2><button>登录</button>
  14.     </header>
  15.     <div class="modal">
  16.         <div class="modal-drop"></div>
  17.         <div class="modal-body">
  18.             <button class="close">关闭</button>
  19.             <fieldset>
  20.                 <legend>登录框</legend>
  21.                 <form action="" method="post">
  22.                     <p>
  23.                         <label for="user-name">用户名</label>
  24.                         <input type="text" name="username" id="user-name">
  25.                     </p>
  26.                     <p>
  27.                         <label for="user-pass">密码</label>
  28.                         <input type="password" name="userpass" id="user-pass">
  29.                     </p>
  30.                     <p>
  31.                         <button>登录</button>
  32.                     </p>
  33.                 </form>
  34.             </fieldset>
  35.         </div>
  36.     </div>
  38.     <!-- 模态框js -->
  39.     <script src="js/modal.js"></script>
  40. </body>
  42. </html>
  • 引入的 css/modal.css 为
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. /* 页眉 */
  8. header {
  9.     background-color: #ccc;
  10.     padding: 0.5em 1em;
  11.     /* BFC 清除浮动 */
  12.     overflow: hidden;
  13. }
  15. header h2 {
  16.     /* 左浮动 */
  17.     float: left;
  18. }
  20. header button {
  21.     /* 右浮动 */
  22.     float: right;
  23.     width: 5em;
  24.     height: 2.5em;
  25. }
  27. header button:hover{
  28.     cursor: pointer;
  29. }
  31. /* 模态框初始化隐藏 */
  32. .modal {
  33.     display: none;
  34. }
  36. /* 遮罩层 */
  37. .modal .modal-drop {
  38.     position: fixed;
  39.     background-color: rgb(0, 0, 0, .5);
  40.     top: 0;
  41.     left: 0;
  42.     right: 0;
  43.     bottom: 0;
  44. }
  46. .modal .modal-body{
  47.     position: fixed;
  48.     background-color: #fff;
  49.     padding: 1em;
  50.     overflow: hidden;
  51.     max-width: 20em;
  52.     max-height: 13em;
  53.     /* 水平垂直自动居中 */
  54.     top: 0;
  55.     left: 0;
  56.     right: 0;
  57.     bottom: 0;
  58.     margin: auto;
  59. }
  61. /* 关闭按钮 */
  62. .modal .modal-body .close{
  63.     position: absolute;
  64.     top: 1.1em;
  65.     right: 1.5em;
  66.     width: 3em;
  67.     height: 1.5em;
  68. }
  70. .modal .modal-body fieldset{
  71.     padding:1em;
  72. }
  74. .modal .modal-body fieldset p{
  75.     padding: .5em 0;
  76. }
  78. .modal .modal-body fieldset p label{
  79.     display: inline-block;
  80.     min-width: 3.5em;
  81. }
  83. .modal .modal-body fieldset p button{
  84.     width: 3.5em;
  85.     height: 2em;
  86. }
  • 引入的外部 js/modal.js 为
  1. const btn = document.querySelector('header button');
  2. const modal = document.querySelector('.modal');
  3. const close = document.querySelector('.close');
  5. btn.addEventListener('click', setModal, false);
  6. close.addEventListener('click', setModal, false);
  8. function setModal(ev) {
  9.     ev.preventDefault();
  10.     let status = window.getComputedStyle(modal, null).getPropertyValue('display');
  11.     modal.style.display = status === 'none' ? 'block' : 'none';
  12. }
  • 附图，点击登录弹出模态框

登录弹出模态框1

  • 点击关闭按钮，关闭模态框

登录弹出模态框2

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：弹层的表单 很不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post