第126天：移動端-原生實現響應式模態框
阿新 • • 發佈：2017-12-27
flex col 16px position inter tween res doc text
下面采用HTML+CSS+JavaScript實現模態框，並采用Flex布局和多媒體查詢實現響應式。
一、模態框HTML代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模態框實現</title> 6 <link rel="stylesheet" href="css\modal.css" type="text/css"> 7 </head> 8 <body> 9 <button class="btn" id="showModel">模態框展示</button> 10 <div id="modal" class="modal"> 11 <div class="modal-content"> 12 <header class="modal-header"> 13 <h4>模態框標題</h4> 14 <span class="close">×</span> 15 </header> 16 <div class="modal-body"> 17 <p>HTML+CSS+JS原生實現響應式模態框演示！</p> 18 </div> 19 <footer class="modal-footer"> 20 <button id="cancel">取消</button> 21 <button id="sure">確定</button> 22 </footer> 23 </div> 24 </div> 25 </body> 26 </html>
首先定義模態框的overlayer，然後定義模態框的內容包括header（帶關閉按鈕）、body和footer。
二、模態框CSS代碼
1 h4{ 2 margin-left: 20px; 3 } 4 p{ 5 text-align: center; 6 } 7 .btn{ 8 width: 100px; 9 height: 35px; 10 border-radius: 5px; 11 font-size: 16px; 12 color: white; 13 background-color: cornflowerblue; 14 } 15 .btn:hover, .btn:focus{ 16 background-color: #95b4ed; 17 } 18 .modal{ 19 display: none; 20 width: 100%; 21 height: 100%; 22 position: fixed; 23 left: 0; 24 top: 0; 25 z-index: 1000; 26 background-color: rgba(0,0,0,0.5); 27 } 28 .modal-content{ 29 display: flex; 30 flex-flow: column nowrap; 31 justify-content: space-between; 32 width: 50%; 33 max-width: 700px; 34 height: 40%; 35 max-height: 500px; 36 margin: 100px auto; 37 border-radius:10px; 38 background-color:#fff; 39 -webkit-animation: zoom 0.6s; 40 animation: zoom 0.6s; 41 resize: both; 42 overflow: auto; 43 } 44 @-webkit-keyframes zoom{ 45 from {-webkit-transform: scale(0)} 46 to {-webkit-transform: scale(1)} 47 } 48 @keyframes zoom{ 49 from {transform: scale(0)} 50 to {transform: scale(1)} 51 } 52 .modal-header{ 53 box-sizing:border-box; 54 border-bottom:1px solid #ccc; 55 display: flex; 56 justify-content: space-between; 57 align-items: center; 58 } 59 .close{ 60 color: #b7b7b7; 61 font-size: 30px; 62 font-weight: bold; 63 margin-right: 20px; 64 transition: all 0.3s; 65 } 66 .close:hover, .close:focus{ 67 color: #95b4ed; 68 text-decoration: none; 69 cursor: pointer; 70 } 71 .modal-body{ 72 padding: 10px; 73 font-size: 16px; 74 box-sizing:border-box; 75 } 76 .modal-footer{ 77 box-sizing:border-box; 78 border-top:1px solid #ccc; 79 display: flex; 80 padding: 15px; 81 justify-content: flex-end; 82 align-items: center; 83 } 84 .modal-footer button{ 85 width: 60px; 86 height: 35px; 87 padding: 5px; 88 box-sizing: border-box; 89 margin-right: 10px; 90 font-size: 16px; 91 color: white; 92 border-radius: 5px; 93 background-color: cornflowerblue; 94 } 95 .modal-footer button:hover, .modal-footer button:focus{ 96 background-color: #95b4ed; 97 cursor: pointer; 98 } 99 @media only screen and (max-width: 700px){ 100 .modal-content { 101 width: 80%; 102 } 103 }
模態框model默認不顯示（display：none），且固定占滿整個屏幕，覆蓋其它內容（z-index），蒙層背景顏色為黑色半透明；
模態框的顯示通過animateion動畫逐漸放大顯示出來；
模態框響應式布局，首先設置整個模態框為flex容器，flex項目為header、body和footer，且主軸為縱向。header和footer模塊又可用flex布局，flex容器為header和footer，flex項目為內部元素，主軸為水平方向。
多媒體media查詢實現當屏幕小到一定程度時，模態框大小比例可適當放大。
三、模態框JavaScript代碼
1 <script> 2 var btn = document.getElementById(‘showModel‘); 3 var close = document.getElementsByClassName(‘close‘)[0]; 4 var cancel = document.getElementById(‘cancel‘); 5 var modal = document.getElementById(‘modal‘); 6 btn.addEventListener(‘click‘, function(){ 7 modal.style.display = "block"; 8 }); 9 close.addEventListener(‘click‘, function(){ 10 modal.style.display = "none"; 11 }); 12 cancel.addEventListener(‘click‘, function(){ 13 modal.style.display = "none"; 14 }); 15 </script>
給按鈕添加事件監聽，當點擊顯示模態框按鈕時，設置modal的display屬性為block，當點擊取消或關閉模態框按鈕時，設置modal的display屬性為none。
四、效果展示
首先點擊顯示模態框，全屏最大顯示：
橫向縮小瀏覽器窗口寬度時，模態框橫向實現響應式顯示。
縱向縮小瀏覽器窗口高度時，模態框縱向實現響應式顯示。
第126天：移動端-原生實現響應式模態框