div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)
生活随笔
收集整理的這篇文章主要介紹了
div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
用H5寫的頁面其中需要實(shí)現(xiàn)彈窗支付功能，功能能夠如下：
https://www.zhihu.com/video/1069241418601725952注意：在這里只介紹彈窗功能，不介紹如何調(diào)用第三方支付功能。
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>資訊</title><style>/* -------------------------注冊購買樣式--------------------------- */.leftIcon{float:left;width:10px;}.top_title{text-align: center;font-size:18px;padding:2vh 0 1vh;border-bottom: 1px solid #f5f5f5; }.line_style{padding:2vh 0;font-size:14px;color:#666;}.border_bottom{border-bottom:1px solid #f5f5f5; }.bottom_btns{width:100%;position: absolute;bottom:3vh;text-align: center;}.common_btn_style{width:46%;padding:1vh 0;color:#fff;border-radius:3px;float:left}.bottom_btns .res_btn{background:#ebc071;}.bottom_btns .buy_btn{background:#d44239;margin-left:1%;}body{overflow: hidden;}.payway{padding:2vh 0;font-size: 13px;}/* -----------------------------模態(tài)框樣式-------------------------------- */.modal {display: none; /* 默認(rèn)隱藏 */position: fixed; /* 根據(jù)瀏覽器定位 */z-index: 1; /* 放在底部 */left: 0;bottom:10px;width: 100%; /* 全寬 */height: 100%; /* 全高 */overflow: hidden; /* 允許滾動(dòng) */background-color: rgba(0,0,0,0.4); /* 背景色 */}/*模態(tài)框內(nèi)容*/.modal-content {display: flex; /*采用flexbox布局*/flex-direction: column; /*垂直排列*/position: absolute;bottom:0;background-color: #fefefe;/* margin: 127% 0; */padding: 20px;width: 90%;animation: topDown 0.4s; /*自定義動(dòng)畫，從模態(tài)框內(nèi)容上到下出現(xiàn)*/}@keyframes topDown {from {bottom: -100px; opacity: 0}to {bottom:0px; opacity: 1}}.bottom_pay_btn{position:absolute;bottom:0.5vh;width:89%;/* margin-left:1%; */height:33px;line-height: 33px;color: #fff;text-align: center;background:#dc443b;border-radius:4px;}/*模態(tài)框頭部*/.modal-header {display: flex; /*采用flexbox布局*/flex-direction: row; /*水平布局*/align-items: center; /*內(nèi)容垂直居中*/justify-content: space-between; }/*關(guān)閉X 樣式*/.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}.close:hover {color: black;text-decoration: none;cursor: pointer;}</style> </head> <body><div style="width:96%;margin-left:2%"><div class="top_title"><img src="img/leftIcon.png" class="leftIcon"/>資訊</div><div class="line_style border_bottom" >國誠e融聯(lián)合優(yōu)款進(jìn)行...</div><div class="line_style">購買價(jià)格：<span style="color:#dc443b;font-weight: bold;">￥5</span></div><div class="bottom_btns"><div class="common_btn_style res_btn">注冊</div><div id="triggerBtn" class="common_btn_style buy_btn">購買</div></div></div><!-- 模態(tài)框 --><div id="myModal" class="modal"><div class="modal-content"><div class="modal-header"><div>支付方式</div><!-- <span id="closeBtn" class="close">×</span> --></div><div class="modal-body"><div class="payway" style="border-bottom:1px solid #f5f5f5"><span>支付寶支付</span><input type="radio" value="" style="float:right"/></div><div class="payway" style="margin-bottom:2vh;"><span>微信支付</span><input type="radio" value=""style="float:right"/></div></div><div class="bottom_pay_btn">支付</div></div></div> </body> <script>(function() {/*建立模態(tài)框?qū)ο?/var modalBox = {};/*獲取模態(tài)框*/modalBox.modal = document.getElementById("myModal");/*獲得trigger按鈕*/modalBox.triggerBtn = document.getElementById("triggerBtn");/*獲得關(guān)閉按鈕*/// modalBox.closeBtn = document.getElementById("closeBtn");/*模態(tài)框顯示*/modalBox.show = function() {this.modal.style.display = "block";}/*模態(tài)框關(guān)閉*/modalBox.close = function() {this.modal.style.display = "none";}/*當(dāng)用戶點(diǎn)擊模態(tài)框內(nèi)容之外的區(qū)域，模態(tài)框也會(huì)關(guān)閉*/modalBox.outsideClick = function() {var modal = this.modal;window.onclick = function(event) {if(event.target == modal) {modal.style.display = "none";}}}/*模態(tài)框初始化*/modalBox.init = function() {var that = this;this.triggerBtn.onclick = function() {that.show();}// this.closeBtn.onclick = function() {// that.close();// }this.outsideClick();}modalBox.init();})(); </script> </html>總結(jié)
以上是生活随笔為你收集整理的div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css 样式三元运算_CSS扩展语言——
- 下一篇： 嵌入式烤箱能不能放台面上_2021年开放