这是不是你想要的h5手机端弹窗
2024-05-12 23:55:40
直接上图
搞错了重新来过
不说了直接上代码
这里使用技术 html+css+jq
图片在最后img文件夹
html部分 index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1"><title>Title</title><style>body, html {height: 100%;font-size: 18px;margin: 0;font-family: Source Sans Pro;}/*按钮样式*/#go {position: absolute;top: 30px;left: 50%;transform: translate(-50%, 0%);color: white;border: 0;background: #71c341;width: 100px;height: 30px;border-radius: 6px;font-size: 1rem;transition: background 0.2s ease;outline: none;}#go:hover {background: #8ecf68;}#go:active {background: #5a9f32;}</style><link rel="stylesheet" href="../css/index.css"><script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id='go'>点击
</button>
<div class='message'><div class='logo'><img src="../img/shop.png" alt=""></div><div class="title"><span> 喜欢"应用商店"吗？</span></div><div class="tip"><span>评价将由XXX统一收集并形成意见反馈给开发商</span></div><div class="like"><ul class="likeStart"><li data-index="1"></li><li data-index="2"></li><li data-index="3"></li><li data-index="4"></li><li data-index="5"></li></ul><span class="sug">我们将定期收集您的评价</span></div><div class="dislike"><label for="check1"><input type="checkbox" data-text="1" class="Checkbox" id="check1"><span>应用响应速度太慢</span></label><label for="check2"><input type="checkbox" data-text="2" class="Checkbox" id="check2"><span>整体界面设计不美观</span></label><label for="check3"><input type="checkbox" data-text="3" class="Checkbox" id="check3"><span>功能不合理未贴近实战业务</span></label><label for="check4"><input type="checkbox" data-text="4" class="Checkbox" id="check4"><span>流程繁琐增加工作负担</span></label><label for="check5"><input type="checkbox" data-text="5" class="Checkbox" id="check5"><span>应用经常报错无法正常使用</span></label><label for="check6"><input type="checkbox" data-text="6" class="Checkbox" id="check6"><span>相同类型应用过多建议整合</span></label></div><textarea cols="10" rows="4" id="assess" placeholder="恳切希望您提出宝贵意见"></textarea><div class="btn"><div class="cancel">以后</div><div class='confirm'>提交</div></div>
</div>
<div id="overlay"></div>
<div id="confirmBox"><div class="boxTitle">感谢您提出宝贵意见</div><div class="boxConfirm">好的</div>
</div>
<div id="confirmOverlay"></div>
<script src="../js/index.js"></script>
</body>
</html>
css部分 index.css
/*弹框盒子*/
.message {
z-index: 3;
position: absolute;
top: 20vh;
left: 50%;
transform: translate(-50%, 0%);
width: 80vw;
background: #efefef;
border-radius: 8px;
font-weight: 300;
color: #2c2928;
opacity: 0;
transition: top 0.3s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.2s ease-in-out;
}
.comein {
top: 20vh;
opacity: 1;
}/*logo*/
.logo {
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 4% 4% 0;
}
.logo > img {
width: 100px;
height: 100px;
}/*主副提示*/
.title{
display: flex;
justify-content: center;
box-sizing: border-box;
font-size: 1.1rem;
padding: 1vh 1vw 0;
font-weight: bolder;
}
.tip {
text-align: center;
font-weight: 200;
font-size: .9rem;
padding: .3vh 6vw 1vh;
border-bottom: 1px solid #cfcfcf;
}
/*遮罩层*/
#overlay {padding: 0;margin: 0;opacity: .9;position: absolute;top: 0;left: 0;background-color: #4c4c4c;width: 100vw;height: 100vh;z-index: 2
}/*评价星星*/
.like{
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid #cfcfcf;
}
.like span{
font-size: 14px;
font-family: Microsoft YaHei UI Regular, Microsoft YaHei UI Regular-Regular;
color: #cecece;
}
.likeStart {
display: flex;
justify-content: center;
}
.likeStart::after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}ul {
padding-inline-start: 0;
margin-block-end: 0;
margin-block-start: 0;
}ul li {
outline: none;
list-style: none;
float: left;
margin: 5px;
width: 20px;
height: 20px;
background: url("../img/startNot.png")no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.startColor, .startColor2 {
background: url("../img/chooseStar.png")no-repeat!important;
background-size: 100% 100%;
}/*低于三颗星的评价*/
.dislike{
display: flex;
flex-direction: column;
}
.dislike>label{
margin: 2%;}
.dislike>label>span{
margin-left: 1%;
font-size: 16px;
}#assess{display: flex;box-sizing: border-box;padding: 2% 3%;width: 99%;border: 0;outline: none;
}/*按钮*/
.btn{
display: flex;
justify-content: space-around;
box-sizing: border-box;
border-top: 1px solid #cfcfcf;
}.cancel,.confirm{
cursor: pointer;
font-size: 18px;
color: #3693F7;
text-align: center;
padding: 2% 0;
width: 50%;
border-right: 1px solid #cfcfcf;
}
.cancel,.confirm :hover{
color: #73afef;
}/*确认弹窗*/
#confirmBox{z-index: 5;position: absolute;top: 30vh;left: 50%;transform: translate(-50%, 0%);width: 70vw;background: #fff;padding: 5%;text-align: center;border-radius: 8px;color: #2c2928;
}
.boxTitle{
font-weight: bold;
}
.boxConfirm{
border-top: 1px solid #cfcfcf;
margin-top: 2vh;
padding-top: 2vh;
color: #73afef;
}
#confirmOverlay{padding: 0;margin: 0;opacity: .7;position: absolute;top: 0;left: 0;background-color: #4c4c4c;width: 100vw;height: 100vh;z-index: 4
}/* checkbox样式修改*/
.Checkbox:checked {
background:#1673ff
}
.Checkbox {
pointer-events: none;
outline: none;
width:25px;
height:25px;
background-color:#ffffff;
border:solid 1px #dddddd;
-webkit-border-radius:50%;
border-radius:50%;
font-size:0.8rem;
margin:0;
padding:0;
position:relative;
display:inline-block;
vertical-align:top;
cursor:default;
-webkit-appearance:none;
-webkit-user-select:none;
user-select:none;
-webkit-transition:background-color ease 0.1s;
transition:background-color ease 0.1s;
}
.Checkbox:checked::after {
content:'';
top:5px;
left:5px;
position:absolute;
background:transparent;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:6px;
width:10px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
js部分 index.js
//初始遮罩层隐藏
\$('#overlay').hide()
\$('#confirmBox').hide()
\$('.dislike').hide()//三颗星以上进行
\$('.sug').hide()//点击三颗星后会有文字，进行隐藏
\$('#confirmOverlay').hide()//提交之后的弹框遮罩层let startVal=0;//获取星级/**
* 按钮点击显示弹出框*/\$('#go').click(function () {\$('#go').fadeToggle();\$('.message').toggleClass('comein');//星级的选择selectStart()// 开启遮罩层\$('#overlay').fadeIn('slow')});/**
* 星级选择*/let star=\$('.likeStart li')function selectStart() {star.hover(function () {\$(this).addClass('startColor');\$(this).prevAll().addClass('startColor');}, function () {\$(this).removeClass('startColor');\$(this).prevAll().removeClass('startColor');})star.click(function (e) {startVal=e.target.dataset.index\$(this).addClass('startColor2');\$(this).prevAll().addClass('startColor2');\$(this).nextAll().removeClass('startColor2');if (e.target.dataset.index <= 3) {showSuggest()}else{\$('.logo').slideDown()\$('.title').slideDown()\$('.tip').slideDown()\$('.dislike').slideUp()\$('.sug').slideUp()}})}/**
* 显示意见*/function showSuggest() {\$('.logo').slideUp()\$('.title').slideUp()\$('.tip').slideUp()\$('.sug').slideDown()\$(".dislike").slideDown()}/**
* 选择评价*/let sugOption=\$("label input");let chooseVal=''const reg=/,\$/gi;sugOption.click(e =>{if(e.target.checked){chooseVal+=e.target.dataset.text+","}})/**
* 点击提交成功后，弹出框*/\$('.confirm').click(function () {// go(500);addSuggestion(1)\$('#confirmBox').show();\$('#confirmOverlay').show()});/**
* 点击以后*/\$('.cancel').click(function () {addSuggestion(0)\$('#go').fadeToggle(500);\$('.message').toggleClass('comein');\$('#overlay').fadeOut('slow')})/**
* 点击好的关闭所有弹框与遮罩层*/\$('.boxConfirm').click(function () {\$('.message').toggleClass('comein');\$('#go').fadeToggle(500);\$('#confirmBox').hide();\$('#confirmOverlay').hide();\$('#overlay').hide();})/**
* 提交评价
* @param status 状态*/function addSuggestion(status) {//提交参数const suggestionInfo={}console.log(suggestionInfo);\$.ajax({url:'',type:'post',data:suggestionInfo,success:(res)=>{}});}/**
* 获取用户上次评价信息*/function getSuggestion() {//参数const suggestionInfo={}\$.ajax({url:'',type:'post',data:suggestionInfo,success:(res)=>{console.log(res);const {Value}=res;//设置星级if (Value.Level <= 3) {showSuggest()}else{\$('.logo').slideDown()\$('.title').slideDown()\$('.tip').slideDown()\$('.dislike').slideUp()\$('.sug').slideUp()}for (let i=0,len=star.length;i<len;i++){if(Value.Level>i){star[i].className='startColor2'}}//评价内容选择for (let i=0,len=sugOption.length;i<len;i++){if(Value.Options.includes(i+1)){sugOption[i].checked=true}}// 添加评价内容\$('#assess').val(\`\${Value.Comment}\`)}});}/**
* 监听手机返回事件*/\$(function(){pushHistory();window.addEventListener("popstate", function(e) {getSuggestion()//获取用户上一次评价\$('.message').toggleClass('comein');//星级的选择selectStart()// 开启遮罩层\$('#overlay').fadeIn('slow')}, false);function pushHistory() {var state = {title: "title",url: "#"};window.history.pushState(state, "title", "#");}});
图片部分
这是不是你想要的h5手机端弹窗相关推荐
- 移动端html5广告的优势,h5手机端开发的优势都有哪些呢
原标题:h5手机端开发的优势都有哪些呢 现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了 ...
- 2021年最新开运算命网运势测算带塔罗牌含H5手机端整站PHP源码
源码介绍 2021年最新开运算命网运势测算带塔罗牌含H5手机端整站PHP源码,这个开运网源码前一阵子流行过一段时间,各大论坛也都陆陆续续发过一些,但是大部分不是不完整就是支付只有官方接口,用起来成本高 ...
- android H5手机端锁屏自动定位问题
关于Android H5手机端后台自动上报定位信息的那点事 手机上的几个重要操作 方法一:使用原生android进行定位(uni-app) 方法二:使用jswork保持后台运行 手机上的几个重要操作 ...
- h5手机端或PC端利用高德地图获取当前定位位置
踩的坑写在前面: 想直接利用h5的特性来获取,但是一直报错,需要https服务,结果还去了阿里云搞ssl的域名卡住了,然后一直报未检测到DNS配置记录,如果你们服务是https就可以直接用这个了. 后 ...
- 解决uni-app视频组件h5手机端全屏后无法横屏播放的问题
最近接到需求要做一个内嵌到手机游戏里的web视频播放器,一个视频列表加一个播放页面. 很简单,一会就做好了. 但是遇到了一个问题却困扰了很久,uni-app的video组件在手机端全屏播放视频时居然无 ...
- h5手机端适配字体设置
前言 手机端页面动态设置根元素,适配不同屏幕大小. 开始 <script>//rem为html的字体大小 通过改变html的字体大小达到适配的效果remChange();//监听屏幕改变r ...
- h5手机端浏览器机制_H5测试介绍
优势: 1.H5可以跨平台,开发成本相对较低: 2.H5可随时上限就更新版本,适合快速迭代: 3.H5可以轻量的触达用户,提供更快捷的服务: 4.在微信入口或者浏览器上,用户只需点开链接就可以获取我们 ...
- H5手机端ios的缓存
h5页面缓存数据清理 ios缓存问题 iOS webview 清除js缓存 webview清除缓存不能清除js缓存 问题: uiwebview加载的是本地的html 文件(包含 HTML js文件 c ...
- 226款H5手机端小游戏源码下载 - HTML+JavaScript开发的网页小游戏开源源码大合集，经过亲测可用！
演示端:http://game.tutou.wang/ (手机访问) 可在线试玩的分享. 链接:https://pan.baidu.com/s/1-R6wEZjLXYm0iowBJLFS8g?pw ...
- html 手机端的meta,H5手机端网站开发meta参数全解析
先看看标准化H5移动端顶部meta 参数设置是如何: web_mobile 1. 指定的iphone中safari顶端的状态条的样式 ,仅限苹果端. 参数:默认值为default(白色),可以定为b ...
最新文章
- win7下搭建手动转码服务器的安装配置tomcat、java、ffmpeg、hy_changsha、FTP
- python是一门什么课程-Python究竟是一门怎样的语言，Python为什么这么火？
- python消费datahub_DataHub使用指南-阿里云开发者社区
- 【NLP】业界总结 | BERT的花式玩法
- 基于互联网生态积累，百度Apollo智舱产品斩获智能网联创新奖
- python os.walk
- 文章目录列表的字体颜色修改
- flock用法详解 linux_linux下C语言中的flock函数使用方法 .
- CSS样式重叠，前端显示的效果
- FPGA 按键控制数码管
- 饥荒指令代码大全一览
- 开闭原则应用-书店打折Java代码实现
- 关于求极限对几个问题的思考和总结
- MACOS系统安装pip
- MySQL面试夺命连环27问
- 300多条MTK工作笔记为你的工作节省一半时间
- 十个数字内的最小绝对值
- 推荐三款好用的终端开发平台
- SSH连接服务器断开
- LTE物理信道PHICH--学习笔记