search

博客列表 >模态框学习与实践

模态框学习与实践

P粉317509817
P粉317509817原创
2022年03月24日 11:30:08473浏览

模态框

html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>模态框</title>
  8.     <link rel="stylesheet" href="模态框.css">
  9.     <script src="模态框.js"></script>
  10. </head>
  11. <body>
  12.     <header>
  13.         <h2 class="title">二刺螈</h2>
  14.         <figure>
  15.             <div>
  16.               <span>Hover Me</span>
  17.               <span onclick="showModal()">登录</span>
  18.             </div>
  19.           </figure>
  20.     </header>        
  21.     <div class="jpg">
  22.            <!-- 内容区 -->
  23.     </div>
  24.     <!-- 模态框 -->
  25.     <div class="modal">
  28.         <!-- 半透明遮罩 -->
  29.         <div class="modal-bg" onclick="closeModal()"></div>
  30.         <!-- 弹层表单 -->
  31.         <form action="" class="modal-form">
  32.             <fieldset style="display: grid; gap: 1em;">
  33.                 <legend>用户登录</legend>
  34.                 <input type="email" name="emali" placeholder="user@mail.com"/>
  35.                 <input type="password" name="psw" id="psw" placeholder="不少于六位密码">
  36.                 <button>登录</button>
  37.             </fieldset>
  38.         </form>
  39.     </div>
  40. </body>
  41. </html>

css样式：

  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. /* 头部样式 */
  10. header {
  11.     background-color: #2C3E50;
  12.     padding: 0.5em 1em;
  13.     display: flex;
  14.     height: 10vh;
  15. }
  17. header .title {
  18.     font-weight:400;
  19.     font-style:normal;
  20.     font-size: 35pt;
  21.     color: aliceblue;
  22.     letter-spacing: 10px;
  23.     text-shadow: 1px 1px 1px #D0D0D0;
  24. }
  25. /* text-shadow:(水平阴影（必须），垂直阴影（必须），模糊距离（可选），阴影颜色（必须）) */
  26. /* letter-spacing:(字间距) */
  27. @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
  28. figure {
  29.   width: 200px;
  30.   height: 60px;
  31.   cursor: pointer;
  32.   perspective: 500px;
  33.   -webkit-perspective: 500px;
  34.   margin-left: auto;
  35.   margin-top: 10px;
  36. }
  38. figure div {
  39.   height: 100%;
  40.   transform-style: preserve-3d;
  41.   -webkit-transform-style: preserve-3d;
  42.   transition: 0.25s;
  43.   -webkit-transition: 0.25s;
  44. }
  46. figure:hover div {
  47.   transform: rotateX(-90deg);
  48. }
  50. span {
  51.   width: 100%;
  52.   height: 100%;
  53.   position: absolute;
  54.   box-sizing: border-box;
  55.   border: 5px solid #fff;
  56.   font-family: "Source Sans Pro", sans-serif;
  57.   line-height: 50px;
  58.   font-size: 17pt;
  59.   text-align: center;
  60.   text-transform: uppercase;
  61. }
  63. span:nth-child(1) {
  64.   color: #fff;
  65.   transform: translate3d(0, 0, 30px);
  66.   -webkit-transform: translate3d(0, 0, 30px);
  67. }
  69. span:nth-child(2) {
  70.   color: #1c175d;
  71.   background: #fff;
  72.   transform: rotateX(90deg) translate3d(0, 0, 30px);
  73.   -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
  74. }
  75. /* 模态框 */
  76. .modal .modal-form{
  77.     width: 20em;
  78.     height: 20em;
  79. }
  80. .modal .modal-form fieldset{
  81.     height: 15.5em;
  82.     width: 20em;
  83.     background-color: #d0d0d0;
  84.     border:none;
  85.     padding: 2rem,3em;
  86.     box-shadow: 0 0 5px #888;
  87.     border-radius: 0 0 1em 1em ;
  88. }
  89. /* 模态框表单标题 */
  90. .modal .modal-form fieldset legend{
  91.     padding:5px 1.5em;
  92.     height: 3em;
  93.     width: 25em;
  94.     background-color: #2C3E50;
  95.     color: white;
  96.     text-align: center;
  97.     border-radius: 1em 1em 0 0;
  98. }
  99. /* 表单 */
  100. .modal .modal-form fieldset input{
  101.     height: 3em;
  102.     width: 25em;
  103.     padding: 0.6em;
  104.     outline: none;
  105.     border:1px solid #2C3E50;
  106.     font-size: 14px;
  107.     margin: 0.6em auto;
  109. }
  110. .modal .modal-form fieldset button{
  111.     width: 10em;
  112.     text-align: center;
  113.     position: relative;
  114.     left: 7.5em;
  115.     bottom: 0.6em;
  116. }
  118. /* focus  */
  119. .modal .modal-form fieldset input :focus{
  120.     box-shadow: 0 0 8px #888;
  121.     border:none;
  122. }
  125. .modal .modal-form fieldset button{
  126.     background-color: #2C3E50;
  127.     color: white;
  128.     border:none;
  129.     font-size: 16px;
  130.     height: 2.5em;
  131. }
  133. .modal .modal-form fieldset button:hover{
  134.     cursor: pointer;
  135.     background-color:black;
  136.     transition: 0.3s;
  137.     box-shadow: 4px 4px 1px white;
  138. }
  140. /* 定位 */
  141. .modal .modal-form{
  142.     position:fixed;
  143.     top:20em;
  144.     left: auto;
  145.     right: 50em;
  146. }
  147. .modal .modal-form fieldset legend {
  148.     position: relative;
  149.     bottom: 1.01em;
  150. }
  151. /* 遮罩 */
  152. .modal .modal-bg{
  153.     position: fixed;
  154.     top:0;
  155.     left: 0;
  156.     right: 0;
  157.     bottom: 0;
  158.     /* 定位在四个方向的原点 */
  159.     background-color: rgb(0,0,0,0.5);
  160. }
  161. .modal {
  162.     display: none;
  163. }
  164. .jpg {
  165.     width: 100vw;
  166.     height: 100vh;
  167.     background-color: #D0D0D0;
  169. }

JS代码：

  1. function showModal() {
  2.     // 获取模态框元素
  3.     const modal = document.querySelector('.modal');
  5.     // 显示模态框
  6.     modal.style.display = 'block';
  8.     // 焦点自动置入第一个输入框email
  9.     modal.querySelector('input:first-of-type').focus();
  10. }
  12. function closeModal() {
  13.     // 获取模态框元素
  14.     const modal = document.querySelector('.modal');
  16.     // 关闭模态框
  17.     modal.style.display = 'none';
  18. }

呈现效果：

上一条：模态框的实例演示下一条：jsp登录页面的简单实例 雏形
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议