一个很简单大方的jquery 弹框 plugin blockUI

<script src="jquery.min.js"></script>
<script src="blockui.min.js"></script>
<style type="text/css"> 

  .job-pos-container{
    margin-bottom: 60px;
    width: 100%;
    height: 100%;
    background: #eee;
  }
  .gray-job-pos img{
    border: solid 10px #eee;
    width: 100%;
  }

  /** tx **/
  .color-job-img{
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    position:absolute;
    left: 0%;
    top: 100%;
    width: 100%;
    height: 100%;
  }
  .gray-job-pos:hover .color-job-img{
    -webkit-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -o-transform:translateY(-100%);
  }

  .job-pos-container .gray-job-pos{
    width: 33.3%;
    position: relative;
    float: left;
    overflow: hidden;
  }
  .job-pos-container .gray-job-pos img.detail-job-img{
    width: 1px;
    height: 1px;
    display: none;
  }

</style>
<script type="text/javascript">
  jQuery(".gray-job-pos").live({
    click: function(e) {
       e.preventDefault();
       e.stopPropagation();
       var popupmodel =  "0";
       var popupstyle =  "0";
       var popupsize =  0.8;
       var bodywidth = jQuery("body").width();
       var bodyheight = jQuery(window).height();

       if( popupstyle=="0" || popupstyle=="1"   ){
         if(popupsize=="0.8"){
          var width =  bodywidth*0.8;
          var height = bodyheight*0.8;
          var toppx = bodyheight*0.1;
          var leftpx = bodywidth*0.1;
         }else if(popupsize=="0.6"){
          var width =  bodywidth*0.6;
          var height = bodyheight*0.6;
          var toppx = bodyheight*0.2;
          var leftpx = bodywidth*0.2;
         }else if(popupsize=="0.4"){
           var width =  bodywidth*0.4;
           var height = bodyheight*0.4;
           var toppx = bodyheight*0.3;
            var leftpx = bodywidth*0.3;
         }
       }else  if(  popupstyle=="2"){
         if(popupsize=="0.8"){
          var width = bodywidth*0.5;
          var height = bodyheight*0.5;
          var toppx = bodyheight*0.25;
          var leftpx = bodywidth*0.25;
         }else if(popupsize=="0.6"){
          var width =  bodywidth*0.3;
          var height = bodyheight*0.5;
          var toppx = bodyheight*0.25;
          var leftpx = bodywidth*0.35;
         }else if(popupsize=="0.4"){
           var width = bodywidth*0.2;
           var height =bodyheight*0.5;
           var toppx = bodyheight*0.25;
            var leftpx = bodywidth*0.4;
         }
       }
       var defaultpadding="padding:40px;";
       if(width<480){
         width = 320;
         leftpx = (bodywidth-320)*0.5;
         if(popupstyle=="1") popupstyle="2";
         if(popupstyle!="2"){
           height = 250;
           toppx = (bodyheight-250)*0.5;
         }
         defaultpadding = "padding:10px;";
       }
       var  allmessage = "";
       var startAt = 0;
       
         var default_img = jQuery(this).children(".detail-job-img").attr('src');//jQuery(this).attr("data-href");
         var title = '';//jQuery(this).attr("data-ptitle");
         var subtitle =  '';//jQuery(this).attr("data-subtitle");
         var desc = '';//jQuery(this).attr("data-desc");
         var isvideo =   0;//jQuery(this).closest(".qfy_item_post").find("video.qfyvideo").length;
         var isyunvideo =   0;//jQuery(this).closest(".qfy_item_post").find(".video_play >iframe").length;
         var video_html = "";
         var videoclass =  "";
         if(isvideo){
           videoclass = "video";
           var video_html = jQuery(this).closest(".qfy_item_post").find("video.qfyvideo").prop("outerHTML");
           video_html = jQuery(video_html).attr("controls","controls").attr("class","localvideo simple").attr("style","width:100%;height:100%;background:#000;").prop("outerHTML");
           
         }else if(isyunvideo){
           videoclass = "video";
           var video_html = jQuery(this).closest(".qfy_item_post").find(".video_play >iframe").prop("outerHTML");
           var videoheight = height;
           if(popupstyle=="2"){
             videoheight = 0.6*height;
           }
           video_html = jQuery(video_html).attr("data-height",videoheight).attr("data-autoplay","true").attr("src", jQuery(video_html).attr("data-src")).prop("outerHTML");
         }
         if(default_img || video_html){
           var message = "";
           if( popupstyle=="0" ){
             message = '<div class="pop_image pop_image1 '+videoclass+'" style="width:'+width+'px;word-wrap: break-word;height:'+height+'px;background-image:url('+default_img+');background-size:cover;/*background-position:center center;*/background-repeat:no-repeat;">'+video_html+'<div  class="content_inner"  style="box-sizing:border-box;position:absolute;bottom:0;width:100%;background:rgba(0,0,0,0.6);padding:20px 15px;text-align:left;"><div class="head"  style="color:#fff;font-size:16px;padding-bottom:10px;">'+title+'</div><div class="content" style="color:#ccc;font-size:14px;">'+desc+'</div></div></div>';
           } else if( popupstyle=="1"  ){
             message = '<div class="pop_image pop_image2 '+videoclass+'" style="width:'+width+'px;word-wrap: break-word;height:'+height+'px;"><div style="background-image:url('+default_img+');background-size:cover;/*background-position:center center;*/background-repeat:no-repeat;width:60%;height:100%;float:left;">'+video_html+'</div><div class="content_inner"  style="box-sizing:border-box;float:left;width:40%;height:100%;background:#fff;padding:20px 15px;text-align:left;"><div class="head"  style="color:#333;font-size:16px;padding-bottom:10px;">'+title+'</div><div class="subhead"  style="color:#999;font-size:14px;padding-bottom:10px;">'+subtitle+'</div><div class="content overflowy" style="color:#666;font-size:14px;overflow-y: auto;;">'+desc+'</div></div> </div>';
           }  else if( popupstyle=="2"  ){
             message = '<div class="pop_image pop_image3 '+videoclass+'" style="width:'+width+'px;word-wrap: break-word;height:'+height+'px;"><div style="background-image:url('+default_img+');background-size:cover;/*background-position:center center;*/background-repeat:no-repeat;width:100%;height:60%;">'+video_html+'</div><div class="content_inner" style="box-sizing:border-box;float:left;width:100%;height:40%;background:#fff;'+defaultpadding+'text-align:left;"><div class="head"  style="color:#333;font-size:16px;padding-bottom:10px;">'+title+'</div><div class="subhead"  style="color:#999;font-size:14px;padding-bottom:10px;">'+subtitle+'</div><div class="content overflowy" style="color:#666;font-size:14px;overflow-y: auto;;">'+desc+'</div></div>  </div>';
           }
           allmessage = '<div class="image_popup" style="position:relative;">'+message+'<div class="block-close" style="position: absolute;top: 2px;right: 9px;color: rgb(204, 204, 204);cursor: pointer;">✕</div></div>';
         }   

       
      if(allmessage){ 
          jQuery.blockUI({
            onOverlayClick: jQuery.unblockUI,
              overlayCSS:{ 
                  backgroundColor: '#000', 
                  opacity:         0.8, 
                  cursor:          'pointer',
                  "z-index":"9400",
              }, 
            css: {"top":toppx+"px","left":leftpx,width:width+"px",height:height+"px",cursor: 'pointer',"border":"0","z-index":"9401"},
            message:allmessage
          });
          jQuery(".localvideo.simple").attr("autoplay","autoplay");
          jQuery('.block-close').css('cursor', 'pointer').unbind().click(function(){
             jQuery.unblockUI();
          });
          if(jQuery(".pop_image2 .content.overflowy").length>0){
            var h = jQuery(".pop_image2").height();
            var head = jQuery(".pop_image2 .head").height()+jQuery(".pop_image2 .subhead").height();
            jQuery(".pop_image2 .content.overflowy").height(h-head-60);
          }else if(jQuery(".pop_image3 .content.overflowy").length>0){
            var h = jQuery(".content_inner").height();
            var head = jQuery(".pop_image3 .head").height()+jQuery(".pop_image3 .subhead").height();
            jQuery(".pop_image3 .content.overflowy").height(h-head);
          }
        
        }
    }
  });
</script>

<div class="job-pos-container">
  <div class="gray-job-pos">
    <img class="gray-job-img" src="01.png">
    <img class="color-job-img" alt="" src="1.png">
    <img class="detail-job-img" alt="" src="2.png">
  </div>
</div>