点击弹出浮动层以及遮罩层的简单方法(jquery)

最新推荐文章于 2019-03-07 14:47:54 发布

工业互联

最新推荐文章于 2019-03-07 14:47:54 发布

阅读量1.4k

点赞数

分类专栏： Others 文章标签： jquery function button border wrapper xhtml

本文链接：https://blog.csdn.net/yoyoch1/article/details/5945695

版权

Others 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>浮层效果</title>
  <script src="jquery.js" type="text/javascript"></script>
  <style type="text/css">
  *{ margin:0px; padding:0px;}
  body{ font-size:12px;}
  .wrapper{ width:940px; border:1px solid #ccc; padding:10px; margin:0 auto; clear:both;}
  .wrapper p{ line-height:24px;}

  #maskLayer{ position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}

  #floatingLayer{ position:absolute; width:400px; height:100px; border:3px solid blue; background-color:#fff; left:0; top:0;}
  #floatingLayer h2{ line-height:25px; color:#fff; font-size:12px; background-color:blue; padding:0 10px;}
  #floatingLayer h2 span{ float:right; font-weight:normal; cursor:pointer;}
  #divContent{ overflow:scroll;}
  .content{ padding:20px; text-align:center;}
  </style>
  <script type="text/javascript">
      $(function() {

    var maskLayer = $('#maskLayer');
    var floatingLayer = $('#floatingLayer');
    maskLayer.hide();
    floatingLayer.hide();

    var pageH = $(document.body).height();
    var pageW = $(document.body).width();

    var winH = $(window).height();
    var maxH = Math.max(winH, pageH);

    var floatingLayer_x = (pageW - floatingLayer.width())/2;
    var floatingLayer_y = (winH - floatingLayer.height()) / 2;

    $(':button').click(function(){
     maskLayer.show().width(pageW).height(maxH);
     floatingLayer.show().css({'top':floatingLayer_y+'px','left':floatingLayer_x+'px'});
    });

    $('#close').click(function(){
     floatingLayer.hide();
     maskLayer.hide();
    });
   });
  </script>
</head>
<body>
  <div id="maskLayer"></div>
  <div id="floatingLayer">
   <h2><span id="close" title="关闭">关闭</span>标题</h2>
   <div id="divContent" class="content">content
       <p>This is a test</p>
   </div>
  </div>

  <div class="wrapper">
   <div style="text-align:center;">
   <input type="button" id="test" value="点击弹出" /></div>
   <p>Page Content</p>

  </div>
</body>
</html>

工业互联

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击弹出浮动层以及遮罩层的简单方法(jquery)

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset
复制链接

扫一扫

专栏目录