簡單封裝一個下彈框
阿新 • • 發佈：2020-08-16
移動端滾動穿透問題，讓body/html不滾動不就行了，讓裡面一個容器內容超出就滾動
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./normalize.css"> <style> * { margin: 0; padding: 0; } h2 { font-weight: 400; font-size: 20px; } html { height: 100%; } body { position: relative; height: 100%; } .container { height: 100%; overflow: auto; } .x_btn { width: 200px; height: 40px; } .x_layer { display: none; position: absolute; top: 0%; width: 100%; height: 100%; background-color: #000; opacity: .2; } .x_popup { overflow: hidden; display: none; position: absolute; z-index: 1000; width: 100%; height: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; padding: 0 20px; box-sizing: border-box; } @keyframes pop { 100% { display: block; height: 260px; } } .popupActive { display: block; bottom: 0; animation: pop cubic-bezier(0.175, 0.885, 0.32, 1.275) .6s forwards; } .x_cancel { position: absolute; width: 20px; height: 20px; top: 5%; right: 5% } .x_tips { text-align: center; border-bottom: 1px solid #ddd; height: 40px; line-height: 40px; } .x_content { width: 100%; height: 50%; padding: 20px 0; line-height: 30px; overflow: auto; } .box1, .box2 { height: 200px; } .box1 { background-color: pink; } .box2 { background-color: skyblue; } </style> </head> <body> <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> <button class="x_btn">彈出</button> <div class="box2"></div> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> </div> <script src="./fastclick.js"></script> <script src="./popup.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function () { FastClick.attach(document.body); }, false); } var options = { title: '題目提示', /* 支援iconfont字型圖示,類名引入 */ cancel: '', content: '我亦好歌亦好酒，唱與佳人飲與友。歌宜關西銅綽板，酒當直進十八斗。 搖擺長街笑流雲，我本長安羈旅人。叢樓參差迷歸路，行者匆匆誰與群。 幸有作文與談詩，寥落情懷有君知。負氣登樓狂步韻，每被遊人笑雙痴。 幸有浩然共蹴鞠，輕撥慢扣自歡娛。七月流火無眠夜，同向熒屏做唏噓。 幸有彩雲喜香山，蘭裳桂冠共遊仙，說來紅塵多趣事，笑聲驚動九重天。 幸有曉豔能操琴，玉蔥手指石榴裙。止如高山流如水，流水溯洄桃花林。 紅衣佳人白衣友，朝與同歌暮同酒。世人謂我戀長安，其實只戀長安某。' } X_popup(options) </script> </body> </html>
popup.js
/** * author: Mr Lee (James) * Date: 2020-8-16 16:30 * description: a tool and seal for popup * version: 1.0 * site: https://www.cnblogs.com/Mr-O-o-Lee/ * @param {Object} obj 配置物件 * @param {String} obj.title 彈框head文字 * @param {String} obj.cancel 彈框右邊x * @param {String} obj.content 提示內容 * @param {String} clsname dom操作物件的類名 * 說明：需要一個.container的容器，並且body高度100%,觸發彈框的元素需要新增x_btn類名 */ var X_popup = (function () { /* 初始化結構 */ initStructure() /* 簡單封裝getElementsByClassName()[0]，簡化程式碼 */ X_GetEleByClass return function (obj) { X_GetEleByClass('x_popup').children[0].innerText = 'X' /* 新增iconfont字型圖示,類名引入 */ obj.cancel && X_GetEleByClass('x_popup').children[0].classList.add(obj.cancel) /* 使用innerHTML可能會遭到xss攻擊 */ X_GetEleByClass('x_popup').children[1].innerText = obj.title X_GetEleByClass('x_popup').children[2].innerText = obj.content } })() function X_GetEleByClass(clsname) { /* document.querySelector不能及時獲取最新DOM */ return document.getElementsByClassName(clsname)[0] } function initStructure() { var structure = `<div class="x_layer"></div> <div class="x_popup"> <i class="x_cancel"></i> <h2 class="x_tips"></h2> <p class="x_content"></p> </div>` var container = document.querySelector('.container') container.insertAdjacentHTML('beforeend', structure) X_GetEleByClass('x_btn').addEventListener('touchstart', handlePopup) /* document.querySelector不能及時獲取最新DOM來繫結事件 */ X_GetEleByClass('x_cancel').addEventListener('touchstart', handleCancel) function handlePopup() { X_GetEleByClass('x_layer').style.display = 'block' X_GetEleByClass('x_popup').classList.add('popupActive') } function handleCancel() { X_GetEleByClass('x_layer').style.display = 'none' X_GetEleByClass('x_popup').classList.remove('popupActive') } }