window.open()方法(弹出层)

1, 最基本的弹出窗口代码

window.open(‘page.html‘);

2, 经过设置后的弹出窗口

window.open(‘page.html‘, ‘newwindow‘, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no,
status=no‘)   //该句写成一行代码

参数解释:

window.open 弹出新窗口的命令;

  ‘page.html‘ 弹出窗口的文件名;

  ‘newwindow‘ 弹出窗口的名字(不是文件名),非必须,可用空‘‘代替;

  height=100 窗口高度;

  width=400 窗口宽度;

  top=0 窗口距离屏幕上方的象素值;

  left=0 窗口距离屏幕左侧的象素值;

  toolbar=no 是否显示工具栏,yes为显示;

  menubar,scrollbars 表示菜单栏和滚动栏。

  resizable=no 是否允许改变窗口大小,yes为允许;

  location=no 是否显示地址栏,yes为允许;

  status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

3, 用函数控制弹出窗口

下面是一段完整的代码

<html>

  <head>

  <script LANGUAGE="JavaScript">

  <!--

  function openwin() {

  window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行

  }

  //-->

  </script>

  </head>

  <body onload="openwin()">

  任意的页面内容...

  </body>

  </html>

解释:这里定义了一个函数openwin(), 函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?

方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;

方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;

方法三:用一个连接调用:

<a href="#" onclick="openwin()"> 打开一个窗口</a>

注意:使用的"#"是虚连接。

方法四:用一个按扭调用:

<input type="button" onclick="openwin()" value="打开窗口" />

4, 弹出两个窗口

对代码稍微改动如下:

 <script LANGUAGE="JavaScript">

  <!--

  function openwin() {

  window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n
o, status=no")//写成一行

  window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca
tion=no, status=no")//写成一行

  }

  //-->

  </script>

为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面的说过的四种方法调用即可。

注意:2个窗口的name(newwindow与 newwindow2)不要相同,或者干脆全部为空。

5, 主窗口打开文件1.htm,同时弹出小窗口page.html

如下代码加入主窗口<head>区:

function openwin()

{

window.open("page.html","","width=200,height=200")

}

加入body区:

<a href="1.htm" onclick="openwin()">open</a>即可。

6, 弹出的窗口之定时关闭控制

将一小段代码加入弹出的页面(注意是加入page.html的HTML中,可不是主页面中,否则......),让它在10秒后自动关闭是不是更酷了?

function closeit()

{

setTimeout("selft.close()", 10000)   //毫秒

}

然后,在body 中添加:<body onload="closeit()">即可。

7, 在弹出窗口中加上一个关闭按扭

<input type="button" value="关闭" onclick="window.close()">

8, 内包含的弹出窗口---一个页面两个窗口

上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。

  <html>

  <head>

  <SCRIPT LANGUAGE="JavaScript">

  function openwin()

  {

  OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars="+scroll+",menubar=no");

  //写成一行

  OpenWindow.document.write("<TITLE>例子</TITLE>")

  OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")

  OpenWindow.document.write("<h1>Hello!</h1>")

  OpenWindow.document.write("New window opened!")

  OpenWindow.document.write("</BODY>")

  OpenWindow.document.write("</HTML>")

  OpenWindow.document.close()

  }

  </SCRIPT>

  </head>

  <body>

  <a href="#" onclick="openwin()">打开一个窗口</a>

  <input type="button" onclick="openwin()" value="打开窗口">

  </body>

  </html>

OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照 格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。

9, 终极应用---弹出的窗口这Cookie控制

回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?

有解决的办法吗?我们使用cookie来控制即可。

首先,将如下代码加入主页面的Html的head区:

   function openwin(){

  window.open("page.html","","width=200,height=200")

  }

function get_cookie(Name)

{

var search=Name+"=";

var returnvalue="";

if(document.cookie.length>0){

      if (offset != -1) {

      offset += search.length

      end = document.cookie.indexOf(";", offset);

      if (end == -1)

      end = document.cookie.length;

      returnvalue=unescape(document.cookie.substring(offset, end));

}

}

return returnvalue;

}

function ladpopup()

{

if(get_cookie(‘popped=yes‘))

{

openwin()

document.cookie="popped=yes";

}

}

最后,用<body onload="loadpopup()">

父级.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="弹出窗口.aspx.cs" Inherits="弹出窗口" %>

<!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 runat="server">
    <title></title>

</head>
<body onbeforeunload="return confirm('确定要离开吗?')">
    <form id="form1" runat="server">
    <div>

        <input id="Button1" type="button" value="button" onclick="window.open('ChildWin.aspx','弹出框','width=900,height=450,top=300,left=300');"/></div>
    </form>
</body>
</html>

ChildWin.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChildWin.aspx.cs" Inherits="ChildWin" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:BulletedList ID="BulletedList1" runat="server" Width="526px">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
            <asp:ListItem>6</asp:ListItem>
            <asp:ListItem>7</asp:ListItem>
            <asp:ListItem>8</asp:ListItem>
        </asp:BulletedList>

        <br />
        <input id="Button1" type="button" value="关闭"   OnClick="window.close();"/></div>
    </form>
</body>
</html>

时间: 2024-08-03 16:40:25

window.open()方法(弹出层)的相关文章

弹出层覆盖整个页面方法

弹出层透明背景加框的常用样式和结构 .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-index:97; display:none;}.alertMessageDivBorder{ position:fixed;

JS简易弹出层手机版

简单说明 手机弹出层模枋了WEIUI.弹出层原理还是依照bootstrap 去掉了PC端的ESC关闭.点击背景层时也不默认关闭. 模板样子 CSS样式 /*弹出时给body加上这个,关闭时去掉*/ .overhide { overflow: hidden; } /*关键样式 遮罩层的*/ .msgboxshadow { position: fixed; /*固定定位*/ left: 0; top: 0; right: 0; bottom: 0; opacity: .5; /*背景透明度.这里没有

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

jQuery 插件开发——PopupLayer(弹出层)

导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时间的工作概要吧. 就我在开发过程中的理解和开发的经验,一般常用的弹出层有三类(其实还有一类就是弹出可以输入内容的,但是这种可以被替代,所以就特别拿出来写了):Confirm.Alert.LoadContent(url).其中Alert又可以分成五种(当然也可以是四种),分别是: "error&quo

如何让EasyUI弹出层跳出框架

这个的解决方法其实挺简单的. 只要在最外面的框架页面加个div,然后用parent.div的id就可以的.但是必须得弹出框得是一个页面. <div id="div_info"></div> //外层弹出框1 function openFirstWin(url, title, width, height) { var strWidth; var strHeight; if (width == null) strWidth = 800; else strWidth

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

ASP.NET—013:实现带控件的弹出层(弹出框)

在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法showModalDialog("新页面相对路径+?参数1&参数2",window,"新页面样式");然后会新弹出一个模态的page页.而在有些时候,仅仅是显示一些单一的.少量的数据,或者一些简单的操作时.就没必要使用新弹出页面了.此时,最好使用弹出层,也就是数据还是显示在当前页面的某个控件上,然后通过JS方法实现达到弹出的目的.看下面的例子: <html xmlns="http:

JS简易弹出层

一个简易的弹出框,内容层自定义.为了简单灵活的在小项目中使用. 目标要求 模仿bootstrap的弹出层实现 如何实现 bootstrap弹出框的效果.经过研究后.思路如下 将要弹出的DIV要置于body直属.不必有遮罩DIV.它在运行时由JS生成.关闭时再删掉 弹出层DIV和遮罩层使用绝对定位并且长宽一样,在弹出前,将BODY设为无滚动条,以消除网页有滚动条时的盖不住问题 弹出层DIV.长宽与页面窗口一样,背景透明.可以单击(单击背景关闭弹出层功能),可以垂直滚动. 弹出层第二级为弹出内容父层

点击页面其他区域隐藏弹出层

弹出层简称pop,隐藏方法有两种. 1. pop上阻止冒泡,document上click隐藏pop jquery实现 $("#showPop").on("click", function(e) { $("#pop").show(); $(document).one("click", function() { $("#pop").hide(); }); e.stopPropagation(); }); $(&

解决弹出层打印问题

jsp页面使用了一个layer插件来做弹出层:并且要求打印弹出层里面的内容. 直接使用window.print()方法打印不出所有的页面内容,仅仅是打印了当前屏幕内容. 我的解决办法是 获取body中所有代码,新建一个空白页面,调用document.write()方法写入, 再打印该页面,实现了正常的分页打印效果. function print(){ var bd=document.body.innerHTML; w=window.open('about:blank'); w.document.