这是不是你想要的h5手机端弹窗

最新推荐文章于 2022-01-07 16:51:31 发布

井底的蜗牛

最新推荐文章于 2022-01-07 16:51:31 发布

阅读量810

点赞数 1

分类专栏： js 文章标签： js css html

本文链接：https://blog.csdn.net/weixin_41277748/article/details/115232565

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

直接上图

搞错了重新来过

不说了直接上代码

这里使用技术 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", "#");
  }
  });