js实现弹框居中,自动获取图片的宽高

最近一直在写弹框的样式,对于不同的宽高的图片还需不断的修改css的具体数,太过麻烦就用js获取了图片的自身宽高,然后js实现水平和垂直的居中(原创)

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>弹框</title>
<link rel=”stylesheet” type=”text/css” href=”css/reset.css”/>
<script src=”js/jquery-1.8.2.js” type=”text/javascript” charset=”utf-8″></script>
</head>
<body>
<style type="text/css">

.boom{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,5);top: 0;left: 0;bottom: 0;right: 0;}

.boombox{text-align: center;position: relative;margin: 0 auto;}

.boombox a{display: block;}

.boombox span{position: absolute;top: 0px;right: 0px;color: #fff;width:30%;height: 30px;display: block;text-align: center;cursor: pointer;}

</style>
<div class=”boom”>
<div class=”boombox”>
<a href=”http://www.bazxedu.com/zixun.php”>
<img  src=”picture/xltc.png”/>
</a>
<span></span>
</div>
</div>
<script type="text/javascript">

$(function(){

//弹框通用js start

$(".boombox a img").attr("class","tk");//给弹框图片加上tk标签

var  img = document.getElementsByClassName('tk')[0];//获取到这个图片

var  nWidth =img.naturalWidth ;    //图片真实宽度

                var  nHeight =img.naturalHeight ;  //图片真实高度

var  bh = (window.innerHeight-nHeight)/2; 

  $(".boombox").css({"margin-top":bh,"width":nWidth});//弹框位置居中

   $(".boombox span").click(function(){

     $(".boom").slideUp(500);//点击关闭

  })

   //弹框通用js end

})

   

</script>
</body>
</html>
赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » js实现弹框居中,自动获取图片的宽高
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏