zoukankan      html  css  js  c++  java
  • 6.21 弹出框

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <title>Document</title>
        <style type="text/css">
            #tanchu{
                 300px;
                height: 300px;
                border-radius: 5px;
                background: rgba(0,0,0,0.3);
                position: absolute;
                display: none;
            }
            .close{
                10px;
                height:10px;
                float:right;
                margin-top: 10px;
                margin-right: 10px;    
            }
            .close:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <button>弹出</button>
        <div id="tanchu">
            <div class="close">X</div>
        </div>
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />
    </body>
    </html>
    <script type="text/javascript">
        $(document).ready(function(){
            var screenwidth,screenheight,tclleft,tctop,scrolltop;
            loadwz();
            $("button").click(function(){
                $("#tanchu").show();
            })
            $(".close").click(function(){
                $("#tanchu").hide();
            })
            $(window).resize(function(){//对浏览器窗口调整大小进行计数:
                loadwz();
            })
            $(document).scroll(function(){//对元素滚动的次数进行计数:
                loadwz();
            })
        })
           function loadwz(){
               screenwidth = $(window).width();
               screenheight = $(window).height();
               scrolltop = $(document).scrollTop();//设置或返回被选元素的垂直滚动条位置。
               tcleft = (screenwidth-300)/2;
               tctop = (screenheight-300)/2;
               $("#tanchu").css({"left":tcleft,"top":tctop+scrolltop});
           }
           //$(document) 是当前文档,就是你看到的整个网页
           //$(window) 如果没有框架则就是你浏览的当前浏览器的窗口
    </script>
  • 相关阅读:
    C# Log4.Net日志组件的应用系列(二)
    C# Log4.Net日志组件的应用系列(一)
    使用TFS+GIT实现分布式项目管理
    动软代码生成器使用教程
    SVN使用教程
    windows系统重装流程
    使用纯真IP库获取用户端地理位置信息
    使用扩展方法重写.NET底层架构
    使用单例模式创建模型仓储层的唯一调用
    使用SQL Delta.v5.1.1.98.破解版同步数据结构
  • 原文地址:https://www.cnblogs.com/sunhao1987/p/9210539.html
Copyright © 2011-2022 走看看