模态框

frontend/views/common/index.php

@@ -107,19 +107,23 @@
     <div class="model_wrap"></div>
 
      <div class="jump unchoose">跳过</div>
-    <div class="content unchoose">权限管理，系统管理功能，用户设置，权限管理，权限分配，部门管理</div>
+     <div class="model-bg unchoose">
-     <div class="content unchoose">
+        <div class="content">权限管理，系统管理功能，用户设置，权限管理，权限分配，部门管理</div>
-            数据库管理，总库分配到小组或个人，数据库管理可以对所有的数据进行分配一般会通过业务人员电话核实之后，分为意向客户，成单客户，无效客户
+        <div class="Previous">上一步</div>
-            (数据库列表名称可根据自己的偏好进行编辑),车辆数据和车险数据相通，供坐席查询相关资料和信息
+        <div class="nextPage">下一步</div>
      </div>
-      <div class="content unchoose">
+     <div class="model-bg unchoose">
-             销售管理，可以看到从数据库分配到业务里面的数据，显示业务所有通话数据和已提交订单，退单，预约信息等等，电销下单，电销系统全程通话录音，
+         <div class="content">数据库管理，总库分配到小组或个人，数据库管理可以对所有的数据进行分配一般会通过业务人员电话核实之后，分为意向客户，成单客户，无效客户
-             详细的通话记录。共查询分析，录音可保存为MP3格式，支持导入导出功能
+                                                   (数据库列表名称可根据自己的偏好进行编辑),车辆数据和车险数据相通，供坐席查询相关资料和信息</div>
+         <div class="Previous">上一步</div>
+         <div class="nextPage">下一步</div>
+     </div>
+     <div class="model-bg unchoose">
+         <div class="content">销售管理，可以看到从数据库分配到业务里面的数据，显示业务所有通话数据和已提交订单，退单，预约信息等等，电销下单，电销系统全程通话录音，
+                                                    详细的通话记录。共查询分析，录音可保存为MP3格式，支持导入导出功能</div>
+         <div class="Previous">上一步</div>
+         <div class="nextPage">下一步</div>
      </div>
-      <div class="Previous unchoose">上一步</div>
-      <div class="nextPage unchoose">下一步</div>
-
-
 </div>
 <!-- 全局js -->
 <script src="/assets/js/jquery.min.js?v=2.1.4"></script>

frontend/web/assets/css/popUps.css

@@ -8,7 +8,10 @@
     display:none;
     z-index:2001;
 }
-.content{
+.unchoose{
+    display: none;
+}
+.model-bg{
     width: 560px;
     position: absolute;
     top: calc(65% - 322px);
@@ -16,26 +19,22 @@
     color:#fff;
     margin-left: -600px;
     z-index:2002 ;
-    font-size:20px;
 }
-.unchoose{
+.content{
-    display: none;
+    font-size:20px;
 }
 .jump{
-    position: absolute;
     width:80px;
     background-color: coral;
     font-size:16px;
     color:#fff;
     padding: 10px 20px;
     border-radius: 6px;
-    top: calc(50% - 322px);
+    margin-bottom:20px;
-    left: 71%;
+    margin-left:450px;
     text-align: center;
-    z-index:2002 ;
 }
 .Previous{
-    position: absolute;
     width:100px;
     text-align: center;
     background-color: #4fbd51;
@@ -43,20 +42,16 @@
     color:#fff;
     padding: 10px 20px;
     border-radius: 6px;
-    top: calc(70% - 322px);
+    margin-top: 20px;
-    left: 71%;
-    z-index:2002 ;
 }
 .nextPage{
-    position: absolute;
     width: 100px;
     background-color: #4fbd51;
     font-size:16px;
     color:#fff;
     padding: 10px 20px;
     border-radius: 6px;
-    top: calc(70% - 322px);
-    left: 80%;
     text-align: center;
-    z-index:2002 ;
+    margin-top:-65px;
+    margin-left:45px;
 }

frontend/web/assets/js/popUps.js

@@ -1,20 +1,12 @@
 $(function(){
     $(".prompt").click(function(){
         $(".model_wrap").show();
-        $(".jump").removeClass("unchoose");
+        $(".model-bg").eq(0).removeClass("unchoose");
-        $(".Previous").removeClass("unchoose");
-        $(".nextPage").removeClass("unchoose");
-        $(".content").eq(0).removeClass("unchoose");
     });
 
     $(".nextPage").click(function () {
-        $(".content").each(function (i,item) {
+        $(".model-bg").each(function (i,item) {
-            console.log(i);
+            $(this).addClass("unchoose").eq(i).removeClass("unchoose");
-            console.log(item);
-            if(!$(this).eq(i).toggleClass("unchoose")){
-                $(this).eq(i).addClass("unchoose");
-                $(this).eq(i+1).removeClass("unchoose");
-            }
         })
     })
 });