2022年弹出窗口详解源码精华教程.docx

上传人：1398****507

文档编号：44318387

上传时间：2022-09-21

格式：DOCX

页数：12

大小：14.92KB

( 4.5 )

《2022年弹出窗口详解源码精华教程.docx》由会员分享，可在线阅读，更多相关《2022年弹出窗口详解源码精华教程.docx（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年弹出窗口详解源码精华教程一、基本改变<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=no, status=no')/写成一行-></SCRIPT>参数说明：window.open 弹出新窗口的吩咐；'pag

2、e.html' 弹出窗口的文件名；'newwindow' 弹出窗口的名字（不是文件名），非必需，可用空''代替；100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable=no 是否允许变更窗口大小，yes为允许；location=no 是否显示地址栏，yes为允许；status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；二、弹启一个全

3、屏窗口加入fullscreen<SCRIPT LANGUAGE=javascript><!-window.open ('page.html', 'newwindow', 'fullscreen') /全屏了，自然其他条件就都失效了-></SCRIPT>三、打开一个和按F11所见到的一样的窗口加入channelmode<SCRIPT LANGUAGE=javascript><!-window.open ('page.html', 'newwindow', cha

4、nnelmode)-></SCRIPT>四、打开一个连标题栏都没有的窗口（无标题、最小、最大、以及关闭按钮）<HTML><HEAD><META http-equiv=Content-Type content=text/html; charset=gb2312><script language=javascript>function unload(){var popUpSizeX=200; /窗口的宽度var popUpSizeY=166; /窗口的高度var popUpLocationX=2;/距离左边的距离相当于

5、 leftvar popUpLocationY=2;/距离顶端的距离相当于 top/ URL of the popUpvar popUpURL= /打开页面的路径/ * 下面的就不要随意改了 *splashWin = window.open(,'x','fullscreen=1, ,scrollbars=auto,resizable=1');splashWin.blur(); / Hide while updatingwindow.focus();splashWin.resizeTo(popUpSizeX,popUpSizeY);splashWin.moveT

6、o(popUpLocationX,popUpLocationY);splashWin.location=popUpURL;}/ ENDunload();</script></HEAD><BODY></BODY></HTML>看看，什么效果？假如把resizable 设为0 scrollbars = no 呢？五、没有最大化按纽的窗口其实也就是象软件的“关于我们”的那个窗口一样，下面就是用对话框窗口来实现它。showModalDialog()以及showModelessDialog()1用showModalDialog()

7、<html><SCRIPT LANGUAGE=javascript><!-showModalDialog('','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')','example04','dialogWidth:400px;dialogHeight:300px;dialogLe

8、ft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')/-></SCRIPT><b></b></body></html>2用showModelessDialog()<html><SCRIPT LANGUAGE=javascript><!-showModelessDialog('','example05','dialogWidth:400px;dialogHeight

9、:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')/-></SCRIPT><b></b></body></h

10、tml>至于showModalDialog()与showModelessDialog()的区分，在于showModalDialog()打开的窗口（简称模式窗口），置在父窗口上，必需关闭才能访问父窗口(建议尽量少用，以免招人反感)；showModelessDialog()（简称无模式窗口），打开后不必关闭也可访问父窗口打开的窗口。现在我将这里的一些参数说明一下。dialogHeight: iHeight 设置对话框窗口的高度。dialogWidth: iWidth 设置对话框窗口的宽度。 dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。dialogTop:

11、 iYPos 设置对话框窗口相对于桌面左上角的top位置。center: {yes no 1 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。help: {yes no 1 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。 resizable: {yes no 1 0 } 指定是否对话框窗口大小可变。默认值是“no”。status: {yes no 1 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是 “no”。六、弹

12、出n 个窗口这很简洁，只要执行n 次window.open()就行了，当然肯定要给每个窗口起不同的名字，还有，设置一下left和top，避开重叠。七、刷新之后就不再弹出窗口我们运用cookie来限制一下就可以了。首先，将如下代码加入主页面HTML的<HEAD>区：<script>function openwin(){window.open(page.html,width=200,200)}function get_cookie(Name) {var search = Name + =var returnvalue = ;if (docum

13、ents.cookie.length > 0) {offset = documents.cookie.indexOf(search)if (offset != -1) {offset += search.lengthend = documents.cookie.indexOf(;, offset);if (end = -1)end = documents.cookie.length;returnvalue=unescape(documents.cookie.substring(offset, end)}}return returnvalue;

14、25;function loadpopup(){if (get_cookie('popped')=''){openwin()documents.cookie=popped=yes}}</script>然后，用<body onload=loadpopup()>（留意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。八、让弹出窗口适应里面图片的大小许多时候我们须要供应这样的功能给访问者：当访

15、问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。实现此功能的最简洁作法是用以下HTML代码创建一个图像链接：<a href= target=_blank><img src=其中<a>标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；<img>标记的src属性指定缩略图的URL。假如我们想对显示全尺寸图片的窗口的外观进行某些限制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的U

16、RL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中：<a href= onClick=window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false><img src=这里就提出了个问题，假如全部全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于全部的缩略图片链接（只是href属性指向的全尺寸图片文件不同）。但假如全尺寸图片的大小并不统一，还用以上代码则我们须要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的状况下，这明显效率太低了。那么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小？通过探讨，发觉可以运用 DHTML 中的 Image 对象来达到我们的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

9.9 金币

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 2022 弹出窗口详解源码精华教程

淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

限制150内

关于本文

本文标题：2022年弹出窗口详解源码精华教程.docx
链接地址：https://www.taowenge.com/p-44318387.html