本教程重寫了alert方法,可修改蒙版顏色,提示信息的字體顏色,按鈕背景顏色,按鈕字體顏色,按鈕水平位置等,修改方式為設(shè)定好的變量中直接修改變量值,若有需要也可直接修改本教程中的代碼.

重寫后的彈出框不僅僅能夠顯示文字,也可以顯示圖片,甚至是其他內(nèi)容,具體效果可在該文章最后面查看提供的圖片.

使用時,建議封裝到單獨的文件中,作為插件使用,如alert.js.

window.alert = function(msg){var maskBg = '#0000002b'; //蒙版展示色var zIndex = 999999; //修改彈出層z-index,應(yīng)為最頂層,避免被覆蓋var desColor = '#1f0000' //提示信息字體顏色var buttonVal = '確定'; //確定按鈕名稱var btnBgColor = '#f61717'; //確定按鈕背景顏色var btnColor = '#fff'; //確定按鈕字體顏色var btnAlign = 'right'; //按鈕在水平位置,默認居中,變量值:left,center,rightvar style = `<style class="mask-style">.box-sizing{box-sizing: border-box;}.alertMask{position: fixed; /*生成絕對定位的元素，相對于瀏覽器窗口進行定位*/display: flex;display: webkit-flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;height: 100%;top: 0;left: 0;z-index: `+zIndex+`;background: `+maskBg+`;}.alertContainer{min-width: 240px; /*容器最小240px*/max-width: 320px; /*容器最大320px*/background:#fff;border: 1px solid `+maskBg+`;border-radius: 3px;color: `+desColor+`;overflow: hidden; }.alertDes{padding: 35px 30px;text-align: center;letter-spacing: 1px;font-size: 14px;color: `+desColor+`;}.alertDes img{max-width: 100%;height: auto;}.alertConfirmParent{width: 100%;padding: 20px 30px;text-align: `+btnAlign+`;box-sizing: border-box;background: #f2f2f2;}.alertConfirmBtn{cursor: pointer;padding: 8px 10px;border: none;border-radius: 2px;color: `+btnColor+`;background-color: `+btnBgColor+`;box-shadow: 0 0 2px `+btnBgColor+`;}</style>`;var head = document.getElementsByTagName('head')[0];head.innerHTML += style //頭部加入樣式,注意不可使用document.write()寫入文件,否則出錯const body = document.getElementsByTagName('body')[0];var alertMask = document.createElement('div');var alertContainer = document.createElement('div');var alertDes = document.createElement('div');var alertConfirmParent = document.createElement('div');var alertConfirmBtn = document.createElement('button'); body.append(alertMask);alertMask.classList.add('alertMask');alertMask.classList.add('box-sizing');alertMask.append(alertContainer);alertContainer.classList.add('alertContainer');alertContainer.classList.add('box-sizing');alertContainer.append(alertDes);alertDes.classList.add('alertDes');alertDes.classList.add('box-sizing');alertContainer.append(alertConfirmParent);alertConfirmParent.classList.add('alertConfirmParent');alertConfirmParent.classList.add('box-sizing'); alertConfirmParent.append(alertConfirmBtn);alertConfirmBtn.classList.add('alertConfirmBtn');alertConfirmBtn.classList.add('box-sizing');alertConfirmBtn.innerText = buttonVal;//加載提示信息 alertDes.innerHTML = msg;//關(guān)閉當前alert彈窗function alertBtnClick(){body.removeChild(alertMask);maskStyle = head.getElementsByClassName('mask-style')[0];head.removeChild(maskStyle); //移除生成的css樣式}alertConfirmBtn.addEventListener("click", alertBtnClick); }

展示文字示例:

alert('被修改的alert樣式如我所示')

效果

顯示圖片示例:

alert('<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=184640506,305875080&fm=11&gp=0.jpg"/>')

效果

如有不足或建議,請留言指出,謝謝!
轉(zhuǎn)載自：吾愛自學(xué)

總結(jié)

以上是生活随笔為你收集整理的修改alert提示框的css样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。