javascript 控制弹出窗口

前言:经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息 、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段javascript代码即可实现。下面我就带您剖析它的奥秘。


　 【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 (documents.cookie.length > 0) {
　　offset = documents.cookie.indexOf(search)
　　if (offset != -1) {
　　offset += search.length
　　end = documents.cookie.indexOf(";", offset);
　　if (end == -1)
　　end = documents.cookie.length;
　　returnvalue=unescape(documents.cookie.substring(offset, end))
　　}
　　}
　　return returnvalue;
　　} 　
　　function loadpopup(){
　　if (get_cookie('popped')==''){
　　openwin()
　　documents.cookie="popped=yes"
　　}
　　}
　　</script>

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/276758.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

苏宁的Node.js实践：不低于Java的渲染性能、安全稳定迭代快

苏宁的Node.js实践：不低于Java的渲染性能、安全稳定迭代快

前端 Node.js 的使用场景大多集中在前端工具上&#xff0c;当前的前端主要把它定位为辅助。苏宁易购使用 Node.js 作为前后端分离的主要手段&#xff0c;经历了从技术引进到全面开花&#xff0c;从边缘功能到核心业务&#xff0c;从纷乱到稳定的过程。同时 Node.js 作为新引入的…
阅读更多...
wpf: DataGridTextColumn 数字格式显示，编辑时取消格式（StringFormat）

wpf: DataGridTextColumn 数字格式显示，编辑时取消格式（StringFormat）

参考&#xff1a;Format values in a Datagrid 参考&#xff1a;Remove stringFormat while editing cell in datagrid 使用 DataGridTemplateColumn 实现&#xff1a; <DataGridTemplateColumn Header"Cot (k€)"><DataGridTemplateColumn.CellTemplate&g…
阅读更多...
MVP群聊某美国公司的应聘试题（压死九个还是一个）

MVP群聊某美国公司的应聘试题（压死九个还是一个）

某美国公司的应聘试题&#xff08;压死九个还是一个&#xff09;&#xff0c;测试你的管理方式有二条铁轨&#xff0c;一条新的&#xff0c;一条旧的。有了新铁轨后&#xff0c;旧铁轨不再有火车通过。有一天有十个小孩到铁轨上玩耍&#xff0c;九个小孩在新铁轨上玩&#xff0…
阅读更多...
JS的常用正则表达式 验证密码

JS的常用正则表达式 验证密码

JS的正则表达式强&#xff1a;字母数字特殊字符 ^(?![a-zA-z]$)(?!\d$)(?![!#$%^&*]$)(?![a-zA-z\d]$)(?![a-zA-z!#$%^&*]$)(?![\d!#$%^&*]$)[a-zA-Z\d!#$%^&*]$中&#xff1a;字母数字&#xff0c;字母特殊字符&#xff0c;数字特殊字符^(?![a-zA-z]$)…
阅读更多...
微软宣布开源WPF、WinForms和WinUI

微软宣布开源WPF、WinForms和WinUI

在微软Connect 2018大会上&#xff0c;微软发布了.NET Core 3.0的第一个预览版。同时&#xff0c;微软还宣布&#xff0c;他们将WPF、Windows Forms&#xff08;WinForms&#xff09;和WinUI作为开源项目托管在GitHub上。它们都是基于MIT许可发行&#xff0c;开发人员可以在自己…
阅读更多...
帆软报表（finereport）使用Event 事件对象 (target)修改提示框样式

帆软报表（finereport）使用Event 事件对象 (target)修改提示框样式

target 事件属性 Event 对象 定义和用法 target 事件属性可返回事件的目标节点&#xff08;触发该事件的节点&#xff09;&#xff0c;如生成事件的元素、文档或窗口。 语法 event.target 定义结束事件JavaScript JS修改内容提示框样式-https://help.finereport.com/doc-view-2…
阅读更多...
python的开发环境有哪些系统_Win10下配置机器学习python开发环境

python的开发环境有哪些系统_Win10下配置机器学习python开发环境

近期计划写一写机器学习微信小程序的开发教程&#xff0c;但微信开发工具只提供了Windows和Mac OS版本&#xff0c;作为一名长期使用Linux系统的开发人员&#xff0c;虽然始终认为Linux系统才是对开发者最友好的&#xff0c;但微信团队作出这种选择&#xff0c;肯定经过调查。不…
阅读更多...
动态添加ContextMenuStrip项（ToolStripItem）

动态添加ContextMenuStrip项（ToolStripItem）

//绑定菜单privatevoidBindMenu(DataTable dt) {foreach(DataRow row indt.Rows) { ToolStripItem item newToolStripMenuItem(); item.Name row[0].ToString(); item.Text row[1].ToString(); item.Click newEventHandler(contextMenuStrip1_ItemClick); contextMenuStrip1.It…
阅读更多...
07_00_加载资源（Webpack Book）

07_00_加载资源（Webpack Book）

Loading Assets(加载资源) In this part, you will learn how to load different types of assets using webpack’s loaders. Especially images, fonts, and JavaScript receive particular attention. You also learn how webpack’s loader definitions work.在这部分&…
阅读更多...
html与cgi脚本的配合使用

html与cgi脚本的配合使用

利用boa服务器测试arm开发板上的cgi和html联合编程的小例程。很简单&#xff0c;但是当时觉得很有意思。在这里给大家展示一下&#xff0c;高手飘过。 在ubuntu下安装boa测试环境&#xff0c;即先在本地搭建一个boa的网页服务器。apt-get install boa。稍作配置即可。我的Boa按…
阅读更多...
zabbix3监控ESXI主机

zabbix3监控ESXI主机

ESXI主机VMware公司企业级虚拟化的解决方案Vsphere的重要组件&#xff0c;也是虚拟机的宿主机&#xff0c;对其监控有着重要的意义&#xff0c;下边介绍二种方发对其监控。 方法一&#xff1a;通过修改服务端的控制项来进行监控。 虚拟机监控分两个步骤完成。首先&#xff0c;Z…
阅读更多...
mybatis jar包_springboot2整合mybatis-plus3踩到的坑

mybatis jar包_springboot2整合mybatis-plus3踩到的坑

前言最近在进行项目重构&#xff0c;在架构师的建议下&#xff0c;就把项目中mybatis切换成mybatis-plus。因为mybatis-plus在mybatis的基础上只做增强不做改变&#xff0c;因此切换的成本很低&#xff0c;就只需改jar和配置内容&#xff0c;原先的代码无需改动。因为mybatis-p…
阅读更多...
java_二进制的前导的零

java_二进制的前导的零

题目内容&#xff1a; 计算机内部用二进制来表达所有的值。一个十进制的数字&#xff0c;比如18&#xff0c;在一个32位的计算机内部被表达为00000000000000000000000000011000。可以看到&#xff0c;从左边数过来&#xff0c;在第一个1之前&#xff0c;有27个0。我们把这些0称…
阅读更多...
共享几套silverlight2 toolkit最新的皮肤控件样式下载

共享几套silverlight2 toolkit最新的皮肤控件样式下载

下载了最新的silverlight2 toolkit看看&#xff0c;发现里面的控件样式还是多漂亮的&#xff0c;与大家分享下。 blue dark light orange purple red 样式源码下载&#xff1a;点击下载 当然&#xff0c;我最喜欢的还是orange哦。 转载于:https://www.cnblogs.com/liaohenchen/…
阅读更多...
python爬取同花顺_Java爬取同花顺股票数据（附源码）

python爬取同花顺_Java爬取同花顺股票数据（附源码）

最近有小伙伴问我能不能抓取同花顺的数据&#xff0c;最近股票行情还不错&#xff0c;想把数据抓下来自己分析分析。我大A股&#xff0c;大家都知道的&#xff0c;一个概念火了&#xff0c;相应的股票就都大涨。 如果能及时获取股票涨跌信息&#xff0c;那就能在刚开始火起来的…
阅读更多...
开会=浪费时间？阿里技术团队这样开项目复盘会

开会=浪费时间？阿里技术团队这样开项目复盘会

2019独角兽企业重金招聘Python工程师标准>>> 阿里妹导读&#xff1a;复盘是项目结束后必不可少的阶段&#xff0c;好的复盘会议能够有效地促进团队成长。今天&#xff0c;阿里项目管理专家鹿迦以自身的经验&#xff0c;为大家分享如何做好一个项目的复盘。这篇文章分…
阅读更多...
Spring @Value注解无法正确赋值问题

Spring @Value注解无法正确赋值问题

正确的调用方式为&#xff1a; Component public class IconProperties {Value("${icon.url}")private String url; } public class test{AutowiredIconProperties icon;public void test(){ String url icon.url; } } 这里有三个需要注意的点&#xff1a; 1.Value…
阅读更多...
Extjs中使用FusionChart举例

Extjs中使用FusionChart举例

一 前言&#xff1a; 在项目实施中&#xff0c;设计统计部分经常会使用图表进行显示&#xff0c;在Extjs3中内置了图表控件&#xff0c;但实际表现无法达到3D的美观效果&#xff0c;通过查找FusionChart可以实现比较美观的3D或2D图表显示。注&#xff1a;FusionChart是个商业…
阅读更多...
drawitem设置指定行的背景颜色_Java 为 Excel 中的行设置交替背景色

drawitem设置指定行的背景颜色_Java 为 Excel 中的行设置交替背景色

点击上方 好好学java &#xff0c;选择 星标 公众号重磅资讯、干货&#xff0c;第一时间送达今日推荐&#xff1a;牛人 20000 字的 Spring Cloud 总结&#xff0c;太硬核了~作者&#xff1a;Jazzz链接&#xff1a;https://www.cnblogs.com/jazz-z/p/12665819.html在制作Excel表…
阅读更多...
常见的关系型数据库和非关系型数据及其区别

常见的关系型数据库和非关系型数据及其区别

一、关系型数据库 关系型数据库最典型的数据结构是表&#xff0c;由二维表及其之间的联系所组成的一个数据组织 优点&#xff1a;1、易于维护&#xff1a;都是使用表结构&#xff0c;格式一致&#xff1b;2、使用方便&#xff1a;SQL语言通用&#xff0c;可用于复杂查询&#x…
阅读更多...
最新文章

Copyright @ 2022~2023