弹层

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>效果图</title>
<link rel="stylesheet" href="css/demo.css">
<script  src="js/jquery-1.8.2.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
   <div class="main">
      <div class="content">
         <div class="content-list root">
            <div class="list-t"><img src="img/photo2.png"></div>
            <div class="list-b">
               <div class="text1">
                  <span class="enroll">设计图片</span>
                  <span class="see">查看</span>
               </div>
               <div class="text2">
                  <span>设计价:10.00元</span> 
                  <span>模板收入:0次</span>
               </div>
            </div>
         </div> 

         <div class="content-list root">
            <div class="list-t"><img src="img/photo2.png"></div>
            <div class="list-b">
               <div class="text1">
                  <span class="enroll">设计图片</span>
                  <span class="see">查看</span>
               </div>
               <div class="text2">
                  <span>设计价:10.00元</span>
                  <span>模板收入:0次</span>
               </div>
            </div>
         </div>

         <div class="content-list root">
            <div class="list-t"><img src="img/photo2.png"></div>
            <div class="list-b">
               <div class="text1">
                  <span class="enroll">设计图片</span>
                  <span class="see">查看</span>
               </div>
               <div class="text2">
                  <span>设计价:10.00元</span>
                  <span>模板收入:0次</span>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="bg"></div>
   <div class="popupbox">
      <div class="btn3"><img src="img/btn3.png"></div>
      <div class="text">您要查看该模块?</div>
      <div class="box">
         <img src="img/btn1.png" class="ok">
         <img src="img/btn2.png" class="cancel">
      </div>
   </div>
</body>
</html>




css:

html,body{
   100%;
   height:100%;
   font-size:14px;
   font-family:"Microsoft YaHei";
   margin: 0;
   padding: 0;
}
.main {
   100%;
   height:100%;
   position: absolute;
   z-index: 1;
}
.content {
   max- 1000px;
   margin:0 auto;
}

.content .content-list{
   210px;
   float:left;
   margin: 0 10px;
}
.content .content-list .list-t {
   100%;
   height:210px;
   background:#ff6600;
   text-align:center;
   border-left:2px solid #ff6600;
   border-right:2px solid #ff6600;
}
.content .content-list .list-t img {
   90%;
   height:100%;
}
.content .content-list .list-b{
   100%;
   background:#fff;
   margin:0 auto;
   border:2px solid #fff;
   border-top: none;
}

.content .content-list .list-b .text1 {
   border-bottom:2px dashed #dbd8d2;
   margin:0 auto;
   padding: 10px;
}

.content .content-list .list-b .text1 .enroll{
   font-weight:bold;
   color:#ff6600;
}

.content .content-list .list-b .text1 .see{
   float:right;
   cursor:pointer;
   color:#555352;
   display:none;
}
.content .content-list .list-b .text2 {
   color:#999;
   text-align:center;
   padding:5px;
}
.content .content-list .list-b:hover {
   border: 2px solid #f60;
   border-top:none;
   background: #f5f5f5;
}

.bg {
   100%;
   height:100%;
   z-index:9;
   position:absolute;
   background:rgba(0,0,0,.4);
   display:none;
}
.popupbox{
   position:absolute;
   z-index:99;
   300px;
   height:120px;
   background:#fff;
   border:10px solid #555352;
   display:none;
}
.popupbox .btn3 {
   float:right;
   margin:5px;
   cursor:pointer;
}
.popupbox .text{
   font-size:18px;
   color:#666;
   line-height:80px;
   text-align:center;
}
.popupbox .box {
   text-align:center;
}
.popupbox .box .ok {
   margin-right:20px;
   cursor:pointer;
}
.popupbox .box .cancel {
   cursor:pointer;
}





js:

var obj ={
   init:function() {
      this.bind();
      this.popup();
   },
   bind:function() {
      //移入显示查看，反之隐藏
      $(".content .list-b").hover(function() {
         $(this).find(".see").show();
      },function() {
         $(this).find(".see").hide();
      });
      //单击查看显示弹层
      $(".see").click(function() {
         $(".bg, .popupbox").show();
         //$(".bg").show();
      });
      //单击取消/关闭隐藏弹层
      $(".btn3, .cancel").click(function() {
         $(".bg, .popupbox").hide();
         //$(".bg").show();
      });
   },
   popup:function() {
      var box = $(".popupbox");
      var _width = document.body.clientWidth;
      var _height = document.body.clientHeight;
      var $width = (_width-box.width())/2;
      var $height =(_height-box.height())/2;
      box.css({'left':$width,'top':$height});
   }
}
$(function() {
   obj.init();
   //移入显示查看，反之隐藏
   /*$(".content .list-b").hover(function() {
      $(this).find(".see").show();
   },function() {
      $(this).find(".see").hide();
   });
   //单击查看显示弹层
   $(".see").click(function() {
      $(".bg, .popupbox").show();
      //$(".bg").show();
   });
   //单击取消/关闭隐藏弹层
   $(".btn3, .cancel").click(function() {
      $(".bg, .popupbox").hide();
      //$(".bg").show();
   });
   popup();
   function popup() {
      var box = $(".popupbox");
      var _width = document.body.clientWidth;
      var _height = document.body.clientHeight;
      var $width = (_width-box.width())/2;
      var $height =(_height-box.height())/2;
      box.css({'left':$width,'top':$height});
   };*/
})

相关阅读:
【AGC016E】Poor Turkeys
【51nod 1597】有限背包计数问题
 RPA应用场景-营业收入核对
 RPA应用场景-报税机器人
 UiPath保存图片操作的介绍和使用
 UiPath图片操作截图的介绍和使用
 UiPath存在图像Image Exists的介绍和使用
 UiPath存在元素Element Exists的介绍和使用
 UiPath存在文本Text Exists的介绍和使用
 UiPath文本操作Get Visible Text的介绍和使用
原文地址：https://www.cnblogs.com/sunshinezjb/p/8572949.html