zoukankan      html  css  js  c++  java
  • jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于当前窗口

    弹出层永远是一个前端必须搞定的东西,一般情况下,如果弹出层有固定的高和宽,用样式即可搞定,但是如果碰到没有固定高或者固定宽或者固定高和宽的时候, 我们就需要用JS去处理,去动态获取当前窗口高或者宽;今天弄了2种情况,一个是相对于屏幕窗体,一个是相对于当前的窗口,看代码,或许对你有用:

    复制代码 代码如下:


    <!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>
    <style>
    body{margin:0px;padding:0px}
    #div1{background:#F00;color: #FFF; display:none;position:absolute;}
    #div2{background:#333333;color: #FFF;400px;display:none; position:absolute;}
    </style>
    <Script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
    //浏览器窗口垂直居中
    <!--
    <Script type="text/javascript">
    function popup(popupName){
    var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
    _windowHeight = $(window).height(),//获取当前窗口高度
    _windowWidth = $(window).width(),//获取当前窗口宽度
    _popupHeight = popupName.height(),//获取弹出层高度
    _popupWeight = popupName.width();//获取弹出层宽度
    _posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
    _posiLeft = (_windowWidth - _popupWeight)/2;
    popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
    }
    $(function(){
    $(".btn1").click(function(){
    popup($("#div1"));
    });
    $(".btn2").click(function(){
    popup($("#div2"));
    });
    });
    </script>
    -->
    //当前窗口垂直居中
    <Script type="text/javascript">
    function popup(popupName){
    _windowHeight = $(".wrap").height(),//获取当前窗口高度
    _windowWidth = $(".wrap").width(),//获取当前窗口宽度
    _popupHeight = popupName.height(),//获取弹出层高度
    _popupWeight = popupName.width();//获取弹出层宽度
    _posiTop = (_windowHeight - _popupHeight)/2;
    _posiLeft = (_windowWidth - _popupWeight)/2;
    popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
    }
    $(function(){
    $(".btn1").click(function(){
    popup($("#div1"));
    });
    $(".btn2").click(function(){
    popup($("#div2"));
    });
    });
    </script>
    </head>
    <body >
    <div >
    <input class="btn1" type="button" value="1"/></div>
    <input class="btn2" type="button" value="2"/></div>
    <div style="500px; background:#ccc; position:relative; top:100px; left:200px;" class="wrap">
    我 是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口 啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口 啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊
    <br>我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊
    <div id="div1">我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊< br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹 出窗口1111啊</div>
    <div id="div2">我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊< br>我是弹出窗口2222啊<br>我是弹出窗口2222啊</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    实例属性 类属性 实例域 类域
    研究数据集
    static 静态域 类域 静态方法 工厂方法 he use of the static keyword to create fields and methods that belong to the class, rather than to an instance of the class 非访问修饰符
    accessor mothod mutator mothod 更改器方法 访问器方法 类的方法可以访问类的任何一个对象的私有域!
    上钻 下钻 切片 转轴 降采样
    识别会话
    Performance Tuning Using Linux Process Management Commands
    Secure Hash Algorithm 3
    grouped differently across partitions
    spark 划分stage Wide vs Narrow Dependencies 窄依赖 宽依赖 解析 作业 job stage 阶段 RDD有向无环图拆分 任务 Task 网络传输和计算开销 任务集 taskset
  • 原文地址:https://www.cnblogs.com/mm2015/p/4991703.html
Copyright © 2011-2022 走看看