`

弹出窗口

阅读更多

 

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

 

其实代码非常简单:

<SCRIPT LANGUAGE="javascript">

<!--

window.open ('page.html')

-->

</SCRIPT>

 

因为这是一段javascript代码,所以它们应该放在<SCRIPT LANGUAGE ="javascript">标签和</script>之间。<!--和-->是对一些版本低的浏览器起作用,在这些老浏 览器中如果不支持javascript,不会将标签中的代码作为文本显示出来。

Window.open ('page.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可

用单引号和双引号都可以,只是不要混用。

这一段代码可以加入HTML的任意位置,加入到<head>和</head>之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。

 

  • 【经过设置后的弹出窗口】

下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。

 

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

 

参数解释:

<SCRIPT LANGUAGE="javascript"> js脚本开始;

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

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

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

height=100 窗口高度;

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

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

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

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

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

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

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

</SCRIPT> js脚本结束。

 

  • 【用函数控制弹出窗口】

下面是一个完整的代码。

 

<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="openwen()"> 浏览器读页面时弹出窗口;

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

方法三:用一个连接调用:<a href="#" onclick="openwin()">打开一个窗口</a>

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

方法四:用一个按钮调用:<input type="button" onclick="openwin()" value="打开窗口">

 

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

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

 

<script language="javascript">

<!--

function openwin(){

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

}

//-->

</script>

加入<body>区:<a href="http://www.5gcp.com " onclick="openwin()">open</a>即可。

 

  • 【弹出的窗口之定时关闭控制】

下面我们再对弹出窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了?

首先,将如下代码加入page.html文件的<head>区:

<script language="javascript">

function closeit() {

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

}

</script>

然后,再用<body onload="closeit()">这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

 

  • 【在弹出窗口中加上一个关闭按钮】

 

<form>

<INPUT TYPE='BUTTON' value='关闭' onClick='window.close()'>

</form>

 

呵呵,现在更加完美了!

 

 

原来的HTML标准中可以用

<a href="document.html" target="_blank"> 打开一个新窗口</a>

 

但新的HTML标准严格上是不允许的。可以采用以下代码:

 

<a href="document.html" rel="external">打开一个新窗口</a>

 

javascript:

 

function externallinks() {

if (!document.getElementsByTagName) return;

var anchors = document.getElementsByTagName("a");

for (var i=0; i<anchors.length; i++) {

var anchor = anchors[i];

if (anchor.getAttribute("href") &&

anchor.getAttribute("rel") == "external")

anchor.target = "_blank";

}

}

window.onload = externallinks;

 

 

 

分享到:
评论

相关推荐

    点击按钮弹出窗口

    5. **关闭弹出窗口**:为了提供关闭弹出窗口的功能,可以在弹出窗口的内部添加一个关闭按钮(例如`&lt;span id="close"&gt;&times;&lt;/span&gt;`),并添加相应的事件监听器来处理关闭操作: ```javascript document....

    SIEMENS-西门子wincc弹出窗口怎么做?.txt

    在探讨如何在SIEMENS-西门子WinCC软件中创建弹出窗口之前,我们首先需要了解WinCC是什么以及它的一些基本概念。 ### WinCC简介 WinCC(Windows Control Center)是西门子公司开发的一款人机界面(HMI)与监控控制...

    自定义弹出窗口

    在IT行业中,自定义弹出窗口是一种常见的交互设计技术,特别是在需要用户输入信息或执行特定操作但不希望离开当前页面的情况下。自定义弹出窗口,正如其名,允许开发者根据需求设计并构建出与系统默认样式不同的...

    弹出窗口资料弹出窗口资料

    在IT行业中,弹出窗口是一种常见的用户界面设计元素,它用于显示额外的信息或者与用户进行交互。本资料主要探讨弹出窗口的相关知识点,包括其功能、类型、实现方式以及优化策略。 1. 弹出窗口的功能: 弹出窗口...

    弹出窗口效果

    在网页设计中,弹出窗口是一种常见的交互元素,用于显示重要的信息、提示用户操作或提供扩展功能。"jQuery + CSS 实现绚丽的弹出窗口效果"这个主题涉及到两个关键的技术:JavaScript 库 jQuery 和样式语言 CSS。它们...

    PROFACE触摸屏弹出窗口的制作方法.pdf

    PROFACE触摸屏弹出窗口的制作方法 PROFACE触摸屏弹出窗口的制作方法是一种常用的工业控制方法,在工业自动化领域中广泛应用。以下是该方法的详细介绍: 一、弹出窗口的建立方法 弹出窗口是指在触摸屏上弹出的一个...

    Java弹出窗口代码

    本文将详细介绍 Java 弹出窗口的代码实现,包括基本的弹出窗口代码和经过设置后的弹出窗口。通过本文,您将学习如何使用 Java 创建弹出窗口,如何设置弹出窗口的外观、尺寸大小和弹出位置。 基本的弹出窗口代码 在...

    js 自动弹出窗口 下来菜单效果

    在探讨“js自动弹出窗口下来菜单效果”的知识点时,我们不仅关注JavaScript代码本身,还应当深入了解其背后的逻辑与应用场景。这段代码展示了如何利用JavaScript创建一个动态下拉菜单,并在用户选择菜单项时自动打开...

    完美弹出窗口 兼容所有浏览器

    在网页设计和开发中,创建一个“完美弹出窗口”是一项常见的需求,它可以在不影响主页面的情况下提供额外的信息或功能。这个主题与JavaScript库JQuery密切相关,特别是针对“完美JQuery弹出窗口”的实现。JQuery是一...

    功能强大的JS弹出窗口

    2. **带遮罩层的弹出窗口**:在这种模式下,弹出窗口会伴随一个灰色半透明的遮罩层,遮罩层覆盖整个页面,使用户注意力集中于弹出窗口,避免了用户在弹窗出现时误操作其他部分。 3. **可定位在指定位置的弹出窗口**...

    asp.net mvc 弹出窗口 技巧

    在ASP.NET MVC中实现弹出窗口功能,能够增强用户体验,例如用于确认操作、显示详细信息或进行表单输入。以下是一些关于在ASP.NET MVC中实现弹出窗口的关键知识点: 1. **JavaScript与jQuery库**:在ASP.NET MVC中,...

    将弹出窗口切换至最大.txt

    ### 将弹出窗口切换至最大 #### 背景介绍与应用场景 在网页开发过程中,经常需要处理弹出窗口的大小和位置调整问题。例如,为了提供更好的用户体验或者展示更多的内容,开发者可能会选择将弹出窗口调整为全屏显示...

    div做的弹出窗口

    在Web开发中,弹出窗口通常用于显示警告、确认信息或者进行用户交互。与传统的JavaScript alert、confirm和prompt不同,自定义的弹出窗口通过CSS控制样式,用JavaScript实现交互功能,提供了更高的定制性和用户体验...

    intraweb中弹出窗口源码

    在 Intraweb 应用程序开发中,"intraweb中弹出窗口源码" 是一个关键的概念,它涉及到在 Web 应用程序中模拟桌面应用程序的非模态窗体行为。Intraweb 是一个 Delphi 开发的组件库,用于构建服务器端的 Web 应用程序,...

    jquery实现弹出窗口

    "jquery实现弹出窗口"是一个常见的需求,尤其在用户交互和信息提示时。这里我们将深入探讨如何使用 jQuery 来创建具有良好兼容性的弹出窗口,并结合实例 "ModalDIV_jquery" 进行讲解。 首先,jQuery 弹出窗口通常被...

    很好用的模态弹出窗口,可自定义弹出窗口外观源码

    在IT领域,尤其是在Web开发中,模态弹出窗口是一种常见的用户界面元素,它能够吸引用户的注意力并提供交互式操作。本资源提供的是一款在ASP.NET平台下非常好用且可自定义外观的模态弹出窗口源码。下面将详细介绍这款...

    .NET弹出窗口总结

    .NET框架为开发者提供了丰富的弹出窗口功能,这些窗口在用户交互和信息传递中扮演着重要角色。本篇文章将深入探讨.NET编程中常见的弹出窗口类型及其应用场景。 首先,最基本的弹出窗口是`MessageBox`,它是由`...

    css3带阴影弹出窗口.zip

    本项目“css3带阴影弹出窗口”利用CSS3的特性来创建一个具有阴影效果的弹出窗口,这种效果类似于流行的Lightbox插件,通常用于展示图片、视频或其他内容,为用户提供沉浸式的浏览体验。 在描述中提到,这个弹出窗口...

    谷歌浏览器弹出窗口拦截取消的设置操作说明(1).docx

    ### 谷歌浏览器弹出窗口拦截取消的设置操作说明 #### 一、引言 在日常使用浏览器的过程中,我们可能会遇到一些网站自动弹出广告或者其他通知窗口的情况。虽然这些弹窗有时候会提供有用的信息或者服务,但很多时候...

Global site tag (gtag.js) - Google Analytics