div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)

用H5写的页面其中需要实现弹窗支付功能，功能能够如下：

https://www.zhihu.com/video/1069241418601725952

注意：在这里只介绍弹窗功能，不介绍如何调用第三方支付功能。

完整代码如下：

<!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;}/* -----------------------------模态框样式-------------------------------- */.modal {display: none; /* 默认隐藏 */position: fixed; /* 根据浏览器定位 */z-index: 1; /* 放在底部 */left: 0;bottom:10px;width: 100%; /* 全宽 */height: 100%; /* 全高 */overflow: hidden; /* 允许滚动 */background-color: rgba(0,0,0,0.4); /* 背景色 */}/*模态框内容*/.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; /*自定义动画，从模态框内容上到下出现*/}@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;}/*模态框头部*/.modal-header {display: flex; /*采用flexbox布局*/flex-direction: row; /*水平布局*/align-items: center; /*内容垂直居中*/justify-content: space-between; }/*关闭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融联合优款进行...</div><div class="line_style">购买价格：<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><!-- 模态框 --><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() {/*建立模态框对象*/var modalBox = {};/*获取模态框*/modalBox.modal = document.getElementById("myModal");/*获得trigger按钮*/modalBox.triggerBtn = document.getElementById("triggerBtn");/*获得关闭按钮*/// modalBox.closeBtn = document.getElementById("closeBtn");/*模态框显示*/modalBox.show = function() {this.modal.style.display = "block";}/*模态框关闭*/modalBox.close = function() {this.modal.style.display = "none";}/*当用户点击模态框内容之外的区域，模态框也会关闭*/modalBox.outsideClick = function() {var modal = this.modal;window.onclick = function(event) {if(event.target == modal) {modal.style.display = "none";}}}/*模态框初始化*/modalBox.init = function() {var that = this;this.triggerBtn.onclick = function() {that.show();}// this.closeBtn.onclick = function() {//   that.close();// }this.outsideClick();}modalBox.init();})();
</script>
</html>

div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)相关推荐

html5实现第三方支付,js实现弹窗功能(以支付方式为例)
用H5写的页面其中需要实现弹窗支付功能,功能能够如下: js弹窗.png 注意:在这里只介绍弹窗功能,不介绍如何调用第三方支付功能. 完整代码如下: 资讯 /* ------------------- ...
html左边高140px怎么设置,html：侧边栏+滚动div，高度设置为当前页面大小
我有一个侧边栏 #sidebar { float: left; position: relative; width: 200px; padding: 20px; } 和一个主体: #main { ma ...
java 中弹窗登陆失败_登录页面登录失败弹窗提示账号密码错误并调回登陆页面问题...
请大神帮忙编写代码跪谢 @Controller @RequestMapping("/*") public class UserAction { @RequestMapping(& ...
禅道设置bug模板_禅道的自定义功能:表格切换和创建页面的自定义
原标题:禅道的自定义功能:表格切换和创建页面的自定义禅道8.2beta版本开始,增强了自定义功能. 用户可以根据自己的使用需要个性化设置禅道页面所显示的功能模块和字段. 可自定义的项如下: 导航菜单 ...
错误代码，1302 行高列宽超出页面大小设置，解决方法
错误代码,1302 行高列宽超出页面大小设置,解决方法使用报表报错: java.lang.RuntimeException: 错误代码:1302 行高列宽超出页面大小设置行原因: 数据库表里面存在 ...
使用CSS样式设置文本超出2行显示为省略号
设置文本超出2行显示为省略号在设计前端页面中,我们经常会遇到文本太长导致超出规定区域的情况. 我们只需要在文本中设置以下样式即可解决该问题: html页面: <div class=" ...
css web页面实现一个弹窗
div 基本层级: <div class="pc-invest-join-container"><div class="bg-wrap"> ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
login.php静态页面的设计,ps+div+css打造蓝色后台--login页面设计
ps+p+css打造蓝色后台做到兼容主流浏览器如何设计一个页面? 如何切片才能更好的配合实现? 如何考虑兼容性? 如何用p+css做后台的百分比布局? Login页面设计先在photoshop中 ...

div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)

div弹窗如何设置不超出页面_js实现弹窗功能(以支付方式为例)相关推荐

最新文章

热门文章