zoukankan      html  css  js  c++  java
  • 有关jquery弹出层

    http://www.jb51.net/article/35216.htm   源地址

    今天用到了 JQuery 弹出层,看了很多东西, 对于其他的用插件的还得下载,想了想 还得下载,

    于是就 找了个只用这个的JQuery/javascript 的代码, 自我感觉用起来方便

    那么 这个网址就给自己留着吧~


    <!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> 

  • 相关阅读:
    golang-grpc-Unimplemented-desc
    redis使用get key中文变成十六进制编码
    golang-generate-1pixel-image
    telnet-redis-quit
    redis hset hmset过期时间
    cookie mapping 原理理解
    excel 表格粘贴到word 显示不完整
    golang-test-tool-gotests
    go build Multiple main.go file
    golang-build-error
  • 原文地址:https://www.cnblogs.com/Amosfengzi/p/3988951.html
Copyright © 2011-2022 走看看