弹出框css技巧原

tianyawhl

发布于 2019-04-04 08:47:02

5.6K10

代码可运行

文章被收录于专栏：前端之攻略前端之攻略

运行总次数：0

代码可运行

技术要点：

一个覆盖整个屏幕的浅灰色背景的div,一个包含内容的的div,

代码如下：

<div id="financeTip" style="">
    <div class="financeTipBg" style=""></div>
    <div id="financeTipInfor" class="e-tankuang alert financeTankuang" style=" ">
       <button type="button" class="close tanweizhiClose" 
           data-dismiss="alert">
           &times;
          </button>
    <div class="e-tankuang-title" id="myModalLabel">弹出框标题</div>
    <div class="e-tankuang-content">弹出框信息</div>
      </div>
  </div>

$(document).ready(function(){
    var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2;
 var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;
    $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"});
 window.onresize=function(){
 
 var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2;
 var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;
    // $("#financeTipInfor").css({"margin": m1_top + "px auto","left": m1_left + "px"});
 $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"});
 }
  $(".close").click(function () {
      $("#financeTip").css({"display": "none"});
      });
});

#financeTip{width:100%;overflow:hidden;}

.financeTankuang{width:90%;}

@media (min-width: 768px){

.financeTankuang{width:600px;}

}

.financeTipBg{position:absolute;width:100%;height:100%;background:#000;z-index:8001;left:0;top:0;opacity:0.2}

#financeTipInfor{position:absolute;left:0;top:0;z-index:8011;}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/04/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

1 条评论

热度

最新

愚公搬代码

2024-01-28

这篇文章真是太棒了！作为一个数据分析师，我一直在寻找一种能够展示多维数据关系的可视化工具，而Pyecharts桑基图完全满足了我的需求。通过本文的介绍，我深入了解了Pyecharts桑基图的多维视角和绘制艺术，学到了很多实用的技巧。现在，我可以更加直观地展示数据的关系和流向，让我的数据分析报告更加生动有趣。感谢作者的分享，我会将这些知识应用到我的工作中，并向同事们推荐这篇文章！

回复回复点赞举报