javascript弹出窗口代码

2023-05-16

     【1、最基本的弹出窗口代码】

  <SCRIPT LANGUAGE="javascript">
  <!--
  window.open ('page.html')
  -->
  </SCRIPT>
  
  因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
   
  【2、经过设置后的弹出窗口】
  
  下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
  
  <SCRIPT LANGUAGE="javascript">
  <!--
  window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no,
menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行
  -->
  </SCRIPT>  
  
  参数解释:
  
  <SCRIPT LANGUAGE="javascript"> js脚本开始;
  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为允许;
  </SCRIPT> js脚本结束

    
  【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 οnlοad="openwin()">
  任意的页面内容...
  </body>
  </html>

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

  方法一:<body οnlοad="openwin()"> 浏览器读页面时弹出窗口;
  方法二:<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口;
  方法三:用一个连接调用:
  <a href="#" οnclick="openwin()">打开一个窗口</a>
  注意:使用的“#”是虚连接。
  方法四:用一个按钮调用:
  <input type="button" οnclick="openwin()" value="打开窗口">

 
   
  【4、同时弹出2个窗口】
  
   对源代码稍微改动一下:
  
  <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=1 00, left=100,toolbar=no,
menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//写成一行
  }
  //-->
  </script>
  为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。
  注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。  
  
  【5、主窗口打开文件1.htm,同时弹出小窗口page.html】

  如下代码加入主窗口<head>区:
  <script language="javascript">
  <!--
  function openwin() {
  window.open("page.html","","width=200,height=200")
  }
  //-->
  </script>
  加入<body>区:
  <a href="1.htm" οnclick="openwin()">open</a>即可。

  
  【6、弹出的窗口之定时关闭控制】
  
  下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中,可不是主页面中,否则 ...),让它10秒后自动关闭是不是更酷了?
首先,将如下代码加入page.html文件的<head>区:
  <script language="JavaScript">
  function closeit()
  {
  setTimeout("self.close()",10000) //毫秒
  }
  </script>
  然后,再用<body οnlοad="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗 口的代码,10秒钟后就自行关闭该窗口。)
  【7、在弹出窗口中加上一个关闭按钮】

  <FORM>
  <INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
  </FORM>
  呵呵,现在更加完美了!

  【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="#" οnclick="openwin()">打开一个窗口</a>
  <input type="button" οnclick="openwin()" value="打开窗口">
  </body>
  </html>

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

  【9、终极应用--弹出的窗口之Cookie控制】

  回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定 没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
  有解决的办法吗?Yes! ;-) Follow me.我们使用cookie来控制一下就可以了。
  首先,将如下代码加入主页面HTML的<HEAD>区:

  <script>
  function openwin(){
  window.open("page.html","","width=200,height=200")
  }
  function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
  offset = document.cookie.indexOf(search)
  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 loadpopup(){
  if (get_cookie('popped')==''){
  openwin()
  document.cookie="popped=yes"
  }
  }
  </script>

  然后,用<body οnlοad="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进 入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

  写到这里弹出窗口的制作和应用技巧基本上算是完成了!


-------------------------------------------------------------------------------------


【专题】window.open的例子和使用方法以及参数说明(完整版)
一、window.open()支持环境: java script1.0+/JScript1.0+/Nav2+/IE3+/Opera3+


二、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)


三、示例:
<SCRIPT>
<!--
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')

//写成一行
-->
</SCRIPT>
脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。
请对照。

上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。


四、各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。

参数 | 取值范围 | 说明
| |
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上


window.showModalDialog使用手册!
基本介绍:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明:
sURL--
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

参数传递:
1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.web3.cn/";
</script>     

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript弹出窗口代码 的相关文章

  • Ubuntu使用VNC运行基于Docker的桌面系统

    2019独角兽企业重金招聘Python工程师标准 gt gt gt docker ubuntu vnc desktop From Docker Index docker pull dorowu ubuntu desktop lxde vnc
  • vncserver Can&#39;t find file /root/.vnc/192.168.1.3:1.pid You&#39;ll have to kill the Xvnc process ...

    CentOS 6 5 修改IP后VNC链接失败 xff0c 提示 xff1a The connection was refused by host computer 尝试删除之前的服务时提示以下信息 xff1a Can 39 t find
  • 国内首个网友可以开发应用的开放式网络操作系统

    国内首个面向电脑爱好者的应用开放平台 X在线电脑 xff0c 提供傻瓜化的网络应用程序开发工具 应用梦工厂 xff0c 让不擅长编程的电脑爱好者们 xff0c 也能开发OA ERP等企业应用 xff0c 并且能快速部署到X在线电脑 X在线电
  • linux多级菜单脚本教程,Linux下使用readline库编程实现多级CLI菜单

    一 背景 CLI是一种快速简洁的人机交互方式 xff0c 优秀的CLI 如 mysql vtysh gdb 带给我们非常好的体验 那么CLI都是如何开发出来的 xff1f 二 相关知识 2 1 CLI vs GUI 文章 1 纵观CLI与G
  • 白盒交换机NOS列表(picos/SnapRoute/ONL)

    WIKI NOS xff1a https en wikipedia org wiki Network operating system Examples JUNOS used in routers and switches from Jun
  • powershell

    常用单行命令 目录 查看当前目录的大小 xff0c 并排序输出 du h max depth 61 1 sort nr 自动选择单位 du m max depth 61 1 sort nr 选择M为单位 转载于 https www cnbl
  • 私有云对企业来说有什么好处

    企业是一个受控集团 xff0c 只有良好的管理 决策 xff0c 一个企业才有成功的希望 xff0c 所以管理在企业中占有重要的地位 私有云的使用是一只无形的手 xff0c 它控制着日常工作中的资源和效率 1 企业拥有基础设施 xff0c
  • JavaScript禁用页面刷新

    JavaScript禁用页面刷新代码如下 xff1a 禁用F5刷新 document onkeydown 61 function if event keyCode 61 61 116 event keyCode 61 0 event can
  • java 整除(/) 求余(%) 运算

    1 java 整除 求余 运算 1 求余 System out println 11 2 顾名思义就是11除2的余数 gt 1 System out println 11 2 结果 gt 1 System out println 11 2
  • C# 解决窗体闪烁

    C 解决窗体闪烁 在Windows窗体上造成 闪烁 的窗体上有很多控制 造成这种闪烁的原因有两个 xff1a 1 当控件需要被绘制时 xff0c Windows发送一个控件两个消息 第一个 xff08 WM ERASEBKGND xff09
  • OVN – OVN OpenStack(二)

    OpenStack networking ovn 项目为Neutron提供了一个基于ML2的OVN插件 xff0c 它使用OVN组件代替了各种Neutron的Python agent xff0c 也不再使用 RabbitMQ xff0c 而
  • 飞秋无法显示局域网好友

    1 飞秋无法显示局域网好友 无法查看网上邻居 无法适用共享打印机的问题是由于开启了 局域网隐身 的缘故 xff0c 打开 360安全卫士 xff1e 功能大全 xff1e 网络优化 xff1e 流量防火墙 xff1e 局域网防护 xff0c
  • pandas 按照某一列进行排序

    pandas排序的方法有很多 xff0c sort values表示根据某一列排序 pd sort values 34 xxx 34 inplace 61 True 表示pd按照xxx这个字段排序 xff0c inplace默认为False
  • 关系数据库和NoSQL结合使用:MySQL + MongoDB

    Home Page 作者使用一个案例来说明MySQL 43 MongoDB结合使用 xff0c 发挥各自所长 xff0c 并且认为他们互补性很强 当然 xff0c 这其中不可避免引入DDD中的编程设计模式 Repository仓储模式 xf
  • 查看网卡信息及状态和网卡日志信息

    查看网卡信息 1 mii tool v w em1 em2 l0 em1 negotiated 100baseTx FD link ok product info vendor 00 aa 00 model 57 rev 1 basic m
  • 筛选出sql 查询结果中 不包含某个字符

    select from table1 where patindex 39 关键字 39 aa 61 0 select from table1 where charindex 39 关键字 39 aa 61 0 select from tab
  • IE8正式版引发VS2005和VS2008添加变量向导出错的解决方案

    1 解决办法1 xff1a 2 卸载IE8 3 解决办法2 xff1a xff08 自己使用的方法 xff09 4 5 打开注册表编辑器 6 7 选择 HKEY CURRENT USER Software Microsoft Windows
  • Visual Studio 2010中文旗舰版+大家所关心的

    下载地址 xff08 VS2010不含MSDN xff09 xff1a http download microsoft com download 2 4 7 24733615 AA11 42E9 8883 E28CDCA88ED5 X16
  • CSS列表

    CSS列表属性可以放置 改变列表项的标志 xff0c 或者将图像作为列表项标志 list style xff1a 简写属性 用于把所有用于列表的属性设置在一个声明中 list style image xff1a 将图像设置为列表项的标志 U
  • Lodash源码讲解-compact函数

    原文首发于Lodash源码讲解 这是我们阅读Lodash源码的第3篇博客 xff0c 在这篇文章里我们来学习一下Lodash的compact方法 compact函数内部没有依赖别的函数 xff0c 让我们先来看一下compact函数的源码

随机推荐

  • CentOS 6.5下Squid代理服务器的安装与配置

    一 系统环境 操作系统 xff1a CentOS release 6 5 Squid版本 xff1a squid 3 1 10 20 el6 5 3 x86 64 SELINUX 61 disabled HTTP Service stope
  • 修改VNCSERVER的分辨率

    使用VNC远程连接时 xff0c 最大化窗口后仍旧在中间显示一个小屏幕 xff0c 并没有随着窗口最大化 xff0c 解决该问题需要首先在VNC窗口标题栏右键 gt Options gt Scaling 选择第二项 xff1a Scale
  • XMLHttpRequest - 原始AJAX初步

    我们知道 xff0c 传统的Web应用是request response形式的 xff0c 即浏览器向服务器发送请求 xff0c 服务器进行处理 xff0c 然后再对浏览器响应 这种形式最大的缺点就是 xff1a 客户端需要等服务器处理完之
  • Python面向对象编程 - 一个记事本程序范例(二)

    给程序加上控制台菜单 menu py import sys from notebook import Notebook Note class Menu 39 39 39 Display a menu and respond to choic
  • 个人代码库の自动粘合桌面边缘

    using System Windows Forms using System namespace public partial class form 必要事件 xff1a No 1 xff1a 窗体的 Move 事件 No 2 xff1a
  • 完全参照系统自带的DatePickerDialog、TimePickerDialog的源代码仿写的DateTimePickerDialog...

    完全参照系统自带的DatePickerDialog TimePickerDialog的源代码仿写的DateTimePickerDialog 具有同时选择日期 时间的功能 在2 2 2 3平台 xff0c 显示的效果可能会有一个大背景框在后面
  • Tracking your habits in Org-mode

    纯属记录 在org mode中 xff0c 你可以跟踪你的周期性事务或辅助培养习惯 xff0c 比如每天阅读半小时 xff0c 每天完成后org mode会予以记录 如果你正计划每月培养一个好习惯 xff0c 也可以使用这个功能来记录你的完
  • 算法的力量

    算法的力量 李开复 真正学懂计算机的人 xff08 不只是 编程匠 xff09 都对数学有相当的造诣 xff0c 既能用科学家的严谨思维来求证 xff0c 也能用工程师的务实手段来解决问题 而这种思维和手段的最佳演绎就是 算法 虽然在摩尔定
  • Xstream序列化实体

    Java序列化的日期为是很标准 xff0c XStream中转换为标准的做法 import java text DateFormat import java text ParseException import java text Simp
  • Booksort 启发式函数很重要h(s1)<=h(s2)+cost(s1,s2);

    Problem Description The Leiden University Library has millions of books When a student wants to borrow a certain book he
  • FreeBSD的基本系统下Shell设置(转)

    FreeBSD的基本系统下Shell设置 转 64 more 64 命令解释程序shell是与用户关系最密切的应用程序 xff0c 用户主要通过shell使用系统 在每次登录系统之后 xff0c 就启动了一个与用户交互的shell xff0
  • 20050410:他们不过是一群政客

    从来就没有把台湾人民的利益放在眼里 xff0c 甚至不惜拿他们来做挡箭牌 xff0c 一边还对日本谄媚有加 转载于 https www cnblogs com yidinghe archive 2005 04 10 134987 html
  • 排列组合公式

    注 xff1a 排列与元素的顺序有关 xff0c 组合与顺序无关 xff0e 如231与213是两个排列 xff0c 2 xff0b 3 xff0b 1的和与2 xff0b 1 xff0b 3的和是一个组合 xff0e 1 xff0e 排列
  • Mybatis初始化机制

    对于任何框架而言 xff0c 在使用前都要进行一系列的初始化 xff0c MyBatis也不例外 本章将通过以下几点详细介绍MyBatis的初始化过程 1 MyBatis的初始化做了什么 2 MyBatis基于XML配置文件创建Config
  • ValidationSummary控件

    ValidationSummary控件用于在页面中的一处地方显示所有验证错误的列表 这个控件在使用大的表单时特别有用 如果用户在页面底部的表单字段中输入了错误的值 xff0c 那么这个用户可能永远也看不到错误信息 不过 xff0c 如果使用
  • 数据特征分析——概述

    一 6个基础分析思路 xff1a 1 分布分析 2 对比分析 3 统计分析 4 帕累托分析 5 正态性检验 6 相关性分析 二 分布分析 分布分析 xff1a 研究数据的分布特征和分布类型 xff0c 分定量数据 定性数据区分基本统计量 三
  • Filebeat 6.0 把日志直接输入到ES中如何自定义index

    临时搭建了一套EFK xff08 elasticsearch xff0c filebeat xff0c kibana xff09 xff0c filebeat 6 0 默认的index 是filebeat 43 时间 xff0c 这样无法满
  • 人在异乡

    为什么到了上海五年 xff0c 还是没有归属感 to be continued
  • 怎么求矩阵对应的基

    怎么求矩阵对应的基呢 xff1f 对矩阵做初等行变换 xff0c 化为上三角形 或 对角型 xff0c 主对角元素不为0的列即为该矩阵的一组基 A 61 这个矩阵对应的一个基 为 其实 xff0c 将第二行的 1 倍加到第一行上 xff0c
  • javascript弹出窗口代码

    1 最基本的弹出窗口代码 lt SCRIPT LANGUAGE 61 34 javascript 34 gt lt window open 39 page html 39 gt lt SCRIPT gt 因为着是一段javascripts代