本文转载

本文主要是通过js动态控制div的高度，css控制浮动

<!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>jQuery弹出窗口 - 计划-博客园</title>

<meta name="keywords" content="www.cnblogs.com/jihua"/>

<style type="text/css">

.window{

    width:250px;

    background-color:#d0def0;

    position:absolute; //如果浏览器出现滚动条需要伴随滚动条一起滚动，设置成fixed

    padding:2px;

    margin:5px;

    display:none;

    }

.content{

    height:150px;

    background-color:#FFF;

    font-size:14px;

    overflow:auto;

    }

    .title{

        padding:2px;

        color:#0CF;

        font-size:14px;

        }

.title img{

        float:right;

        }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        $("#btn_center").click(function () {

            popCenterWindow();

        });

        $("#btn_right").click(function () {

            popRightWindow();

        });

        $("#btn_left").click(function () {

            popLeftWindow();

        });

    }); 

</script>

</head>

<body>

 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">

<input type="button" value="居中窗口" id="btn_center" />

<input type="button" value="居左下角" id="btn_left" />

<input type="button" value="居右下角" id="btn_right" />

</div>

   <div class="window" id="center">

<div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div>

<div class="content">jihua.cnblogs.com</div>

   </div> 

  <div class="window" id="left">

<div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居左窗口</div>

<div class="content">jihua.cnblogs.com</div>

  </div>

  <div class="window" id="right">

<div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居右窗口</div>

<div class="content">jihua.cnblogs.com</div>

  </div>

  <script type="text/javascript">

  //获取窗口的高度

var windowHeight;

//获取窗口的宽度

var windowWidth;

//获取弹窗的宽度

var popWidth;

//获取弹窗高度

var popHeight;

function init(){

   windowHeight=$(window).height();

   windowWidth=$(window).width();

   popHeight=$(".window").height();

   popWidth=$(".window").width();

}

//关闭窗口的方法

function closeWindow(){

    $(".title img").click(function(){

        $(this).parent().parent().hide("slow");

        });

    }

    //定义弹出居中窗口的方法

    function popCenterWindow(){

        init();

        //计算弹出窗口的左上角Y的偏移量

    var popY=(windowHeight-popHeight)/2;

    var popX=(windowWidth-popWidth)/2;

    //alert('jihua.cnblogs.com');

    //设定窗口的位置

    $("#center").css("top",popY).css("left",popX).slideToggle("slow");

    closeWindow();

    }

    function popLeftWindow(){

        init();

        //计算弹出窗口的左上角Y的偏移量

    var popY=windowHeight-popHeight;

    //var popX=-(windowWidth-popWidth);

    //alert(popY);

    //设定窗口的位置

    $("#left").css("top",popY-50).css("left",50).slideToggle("slow");

    closeWindow();

    }

    function popRightWindow(){

        init();

        //计算弹出窗口的左上角Y的偏移量

    var popY=windowHeight-popHeight;

    var popX=windowWidth-popWidth;

    //alert(www.cnblogs.com/jihua);

    //设定窗口的位置

    $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");

    closeWindow();

    } </script>

</body>

</html>

jquery-通过js编写弹出窗口的更多相关文章

  1. jQuery插件---轻量级的弹出窗口wBox

    Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层, ...

  2. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  3. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  4. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  5. jquery Jbox 插件实现弹出窗口在修改的数据之后，关闭弹出窗口刷新父页面的问题

    http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...

  6. 基于Jquery的原生态dialog弹出窗口-zapWindow

    看到boss系统搓B的填出窗口,不忍直视,坚决的换掉! 采用zapwindow(来源不清楚了,总之是前人留下的),做了修改,当前支持三类弹出类型: 1. 指定url 2. 自定义html 3. 指定D ...

  7. js实现弹出窗口、页面变成灰色并不可操作的例子

    function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...

  8. JS实现当前页弹出窗口，且页面变灰不可操作

    使用JS在当前页面在div中加载弹出窗口,并让当前页面变灰不可操作. 加载弹出窗口的div需将宽高设置成整个页面的大小,以覆盖当前页面的内容. opacity:0.6: 页面可见度设置为0.6(1为完 ...

  9. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

随机推荐

  1. 网页动物园2.0发布，经过几个月的努力，采用JAVA编写！

    网页动物园2.0发布,经过几个月的努力,采用JAVA编写! 网页动物园2.0 正式发布!游戏发布 游戏名称: 网页动物园插件 游戏来源: 原创插件 适用版本: Discuz! X1.5 - X3.5 ...

  2. [No000009]学习重要还是经营人脉重要？

    大说数人的朋友圈都是这样的:雪中送炭的寥寥无几,锦上添花的大多数人连你自己都不认识,碰到倒霉的时候还能遇到落进下石的.人脉是很重要,可相对自身的学习来说,就没有想象中那么重要了. 有一次在北大讲座,遇 ...

  3. IOS第四课——Autolayout_View

    这节课,我们要学习MVC.Selector.Access Control.Extension.Auto Layout.Delegate-Protocol.Custom View. Auto Layou ...

  4. NPM 如何升级？

  5. sudo命令使用的几个场景

    在linux系统下,普通用户无法直接执行root用户权限下的命令,如果想让普通用户执行只有root用户才能执行的操作命令.下面罗列下经常使用sudo命令的几个场景: 1.用户无权限执行root命令普通 ...

  6. JS/PHP 浮点数精确运算

    php浮点数精确运算 bc是Binary Calculator的缩写.bc*函数的参数都是操作数加上一个可选的 [int scale],比如string bcadd(string $left_oper ...

  7. 理解java的finalize

    基本预备相关知识 1 java的GC只负责内存相关的清理,所有其它资源的清理必须由程序员手工完成.要不然会引起资源泄露,有可能导致程序崩溃. 2 调用GC并不保证GC实际执行. 3 finalize抛 ...

  8. linux可靠信号和非可靠信号测试样例

    不可靠信号(在执行自定义函数其间会丢失同类信号) 可靠信号(在执行自定义函数其间不会丢失同类信号) 不可靠信号用一次以后,就恢复其默认处理吗? 至少在ubuntu 12.04上,已经是一次绑定,永远使 ...

  9. Java类加载和类反射回顾

    今天学习Spring,突然想重新复习一下Java类加载和类反射的.巩固一下底层原理.部分参考了李刚老师的<疯狂Java讲义>和陈雄华.林开雄的<Spring3.x企业应用开发实战&g ...

  10. 【分布式协调器】Paxos的工程实现-cocklebur简介（一）

    初识分布式协调器 分布式协调器的“协调”二字让人摸不到头脑,怎么就协调了,用的着协调吗?实际上这个东西在之前就是为了提供分布式锁服务而设计的,伟大的google公司发明了chubby,雅虎随后也推出了 ...