jquery打开新的窗口

使用本代码可以实现打开一个新的窗口,窗口的位置可变

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

    <style type="text/css">
        .window{
            width:250px;
            background-color:#d0def0;
            position:absolute;
            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="../jquery-1.4.4.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="a.jpg" alt="关闭" />居中窗口</div>
    <div class="content">居中窗口</div>
</div>

<div class="window" id="left">
    <div id="title2" class="title"><img src="a.jpg" alt="关闭" />居左窗口</div>
    <div class="content">居左窗口</div>
</div>
<div class="window" id="right">
    <div id="title3" class="title"><img src="a.jpg" alt="关闭" />居右窗口</div>
    <div class="content">居右窗口</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>

上述代码所使用的图片我上传至百度盘,地址为: http://pan.baidu.com/s/1hqhDs9I ,上述代码使用的jquery.min文件自己可以去百度搜索一下,下载一个即可使用。

页面效果如下:

时间: 2024-11-10 15:00:38

jquery打开新的窗口的相关文章

JS打开新的窗口

一.使用JS打开新窗口 1. 超链接<a href="http://www.wumz.me" title="Mauger`s Blog">Welcome</a> 等效于js代码: window.location.href="http://www.wumz.me";     //在同当前窗口中打开窗口 2. 超链接<a href="http://www.wumz.me" title="Ma

js在页面中打开新的窗口

一. 新建一个窗口,完全独立 var tabTitle = "test"; var url ="test.action"; var icon = 'icon-add'; window.parent.addTab(tabTitle, url, icon); 在窗口上悬浮一个窗口,两窗口在同一个HTML文档 <div id="test"></div> $('#test').dialog({ title: 'test', wid

selenium自动化测试打开新标签窗口

做项目自动化测试时遇到这个问题:先打开一个页面需要在现有打开浏览器的基础上新开一个标签页输入网址, 在网上查了很多无果,后来发现了内嵌js代码,让js代码实现的方式.谁有其他方法的可以共享一下 方法如下: 1 #新标签页打开这个url 2 js="window.open("url")" 3 driver.execute_script(js) 4 time.sleep(2)

JavaScript打开新窗口

有时候会用到使用js打开新窗口, 使用window.open("http://www.baidu.com"); 这种方式会被浏览器拦截. 可以使用 var newTab=window.open('about:blank'); newTab.location.href="http://www.baidu.com"; 来打开新的窗口.

SHOWMODALDIALOG表单提交时禁止打开新窗口

前提条件:showmodaldialog中有表单form.当action="#"的时候,提交表单,不会打开新窗口,但这种#自提有时不能用,#是本页面完整的带参数的url,如果表单中有参数和url中的参数相同,那么提交后,表单中的这个同名参数会被#中的参数覆盖,造成表单中的这个参数无法取得,除非在表单中重新修改name这个参数: 当actiong="本页面.jsp"的时候,提交时,在IE环境中showmodaldialog会打开新的窗口,设置target="

android安卓开发基础小笔记,添加按钮事件,打开新窗体,窗体传值,回传

给一个按钮添加onclick事件 //获取按钮对象 Button Aiyo = (Button)findViewById(R.id.button1); Aiyo.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {//tv.setText("woceshi"); //弹出提示 Toast.makeText(getApplicationContext(), '你好', Toas

ajax请求成功后打开新窗口地址

转自:http://www.cnblogs.com/linjiqin/p/3148205.html jQuery.ajax({       "type":"post",       "url":"http://www.baidu.com",       "success":function(rel){            if(rel.isSuccess){                 window.

JS打开新窗口防止被浏览器阻止的方法

这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javas

打开新窗口并运行代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>'运行代码'的文本域代码</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> &