简易弹窗

封装简单弹窗

//弹窗
 function up_win(click_a,win_dom){
   $(click_a).click(function(){
      $(win_dom).toggle();
      $('<div id="black_bg" style="position: fixed;width: 100%;height: 100%;background: #000;opacity: 0.5;left: 0px;top: 0px;z-index: 1601;"></div>').appendTo($('body'));
   });
   $(win_dom).find('.tit .close_a').click(function(){
      $(win_dom).toggle();
      $('#black_bg').remove();
   });
 }

 up_win('#user_info .load_font a','#grow_up');  //绑定点击弹窗的按钮，弹窗本身

html:

<div id="grow_up">
  <div class="tit">标题<a class="close_a"></a></div>
  内容
</div>

pc css:

//红色部分要自行运行
.tit .close_a{ display:block; width:23px; height:23px; background:url(../images/close.png) no-repeat; position:absolute; right:15px; top:14px; cursor:pointer;}
#grow_up{width: 1160px;position: fixed;left: 50%;margin-left: -580px;background: #fff;z-index: 1602;top: 0px;padding-bottom:30px;top: 50%;margin-top: -195px;display: none;}
#grow_up .tit{height: 68px;border-bottom: 1px solid #e0e0e0;text-align: center;background: #f0f0f0;font-size: 22px;line-height: 68px;letter-spacing: 1px;}
#grow_up .tit .close_a{top: 22px;}

微信 css

.tit .close_a{ display:block; width:23px; height:23px; background:url(../images/closed.svg) no-repeat; position:absolute; right:15px; top:14px; cursor:pointer;}
.public_win{width: 300px;position: fixed;left: 50%;margin-left: -150px;background: #fff;z-index: 1602;top: 0px;top: 50%;margin-top: -195px;display: none;}
.public_win .tit{height: 38px;border-bottom: 1px solid #e0e0e0;text-align: center;background: #f0f0f0;font-size: 22px;line-height: 38px;letter-spacing: 1px;text-align: left;padding-left: 5px;}
.public_win .tit .close_a{top: 7px;}
.public_win .con{padding: 5px;color: #8c8c8c;}