如何控制弹出窗口的大小、尺寸、位置等的样式
原文地址:http://www.leadto.com.cn/technews/316.html
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)不要相同,或者干脆全部为空。
点击后通过js弹出窗口
方法1
<a style="cursor:hand" οnclick='window.open("http://www.leadto.com.cn","","width=420,height=830")'>弹出页面</a>
方法2
<a href="#" οnclick="window.open('01.htm','go','width=380,height=200,left=200,top=200,screenX=200,screenY=200')">点击弹出页面</a>
5、弹出窗口在新页面的后面
<script
language="javascript">
{
newwin=window.open("http://www.leadto.com.cn","青岛网站设计","width=550 height=450 toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes");
newwin.blur();
}
</script>
6、修饰弹出窗口
使用下面这段代码,我们可以对弹出窗口做更多的控制,包括窗口大小、窗口位置、是否带工具栏、是否可以改变大小等等。
示例代码2:
〈script language="JavaScript1.2" type="text/JavaScript1.2"〉
var popUpWin=0;
function popUpWindow()
{
//判断该窗口(popUpWin)是否已经存在,如果已经存在,则先关闭窗口,然后再打开新窗口
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
//根据参数定位弹出窗口的展示位置
popUpWin = window.open(‘page.htm’, 'popUpWin', 'toolbar=no,location=no,
directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width=100,height=100,
left=100,top=100,screenX=100,screenY=100’);
}
〈/script〉
弹出窗口参数一览
弹出窗口的命令格式:“window.open(‘URLStr’, ‘WindowName’, ‘Property’);”,其中:
1.window.open命令用于在网页上弹出一个新窗口。
2.URLStr:弹出窗口所显示的页面
3.WindowName:弹出窗口的名称,可以任意指定,也可以用’’来代替
4.Property:用于控制弹出窗口显示的属性,具体可控制的参数有:
5.Toolbar:是否显示浏览器工具栏,yes为显示,no为不显示
6.Location:是否显示游览器地址栏,yes为显示,no为不显示
7.Directories:是否显示目录按钮,yes为显示,no为不显示
8.Status:是否显示状态栏,yes为显示,no为不显示
9.Menubar:是否显示菜单条,yes为显示,no为不显示
10.Scrollbar:是否激活水平和垂直流动条,yes为显示,no为不显示
11.Resizable:是否可以改变窗口大小,yes为显示,no为不显示
12.Width:指定窗口的宽度,以像素为单位
13.Height:指定窗口的高度,以像素为单位
14.Left:指定窗口距屏幕左端的距离,以像素为单位
15.Top:指定窗口距屏幕顶端的距离,以像素为单位
16.screenX:等同于Left属性
17.screenY:等同于Top属性
特效窗口示例
了解了窗口属性的定义,我们一起来看一些特殊应用,原来还真有些学问在里面。
通过函数调用控制弹出窗口
如“示例代码2”所定义的弹出窗口,在没有调用popUpWindow方法之前,该窗口是不会自动弹出的,下面我们来看几种常用的调用方法:
页面加载时自动弹出窗口
〈body onLoad=”javascript:popUpWindow();”〉
页面关闭时自动弹出窗口
〈body onUnLoad=”javascript:popUpWindow();”〉
通过链接或者按钮触发弹出窗口
〈a href=”#” onClick=” javascript:popUpWindow();”〉
〈input type=”button” name=”弹出窗口” onClick=” javascript:popUpWindow();”〉
弹出窗口定时关闭
在弹出的窗口中加入下面一小段代码,弹出的窗口就会在20秒后自动关闭。(这段代码要加在弹出窗口中,而不是主页上)
〈script language="javascript"〉
function closeit()
{
setTimeout("self.close()",10000) //毫秒
}
〈/script〉
将这段代码加入〈head〉标签内,然后再修改〈body〉标签为〈body onLoad=”closeit()”〉就可以了。
为弹出窗口加上一个关闭按钮
在弹出的窗口中加入下面代码,页面上会多出一个按钮,单击这个按钮,弹出窗口会自动关闭,而不会有任何提示。
〈INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'〉
如何控制弹出窗口的大小、尺寸、位置等的样式相关推荐
- 如何解决弹出窗口固定大小及内容的问题
昨天在做前期DEMO时,要用到点击"查看详细信息"弹出一个页面,但这个页面是以窗口的形式弹出的,而且还固定大小 问题也很简单也解决了,但类似这样的问题在IE7中有些IE7弹出的窗口 ...
- javascript 控制弹出窗口
前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息 .警告.欢迎光顾之类的话或者作者想要特别提示的信息.其 ...
- 父窗口控制弹出窗口快捷键ctrl+c关闭
为什么80%的码农都做不了架构师?>>> window.win = window.open("open.html", "_blank") ...
- 自适应图片大小的弹出窗口(3 中方法)
方法一 在最近的项目中,遇到一个问题,要实现这样的效果: 点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动 ...
- JavaScript自适应图片大小的弹出窗口
很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看. 实现此功能的最简单作法是用以下HTML代码创建一个图像链接: < ...
- 弹出窗口以及关闭窗口
按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面非常容易,只要往该页面的HTML里加入几段javascript代码即可实现. ...
- 最基本的弹出窗口代码
<SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> </SCRIPT& ...
- JS弹出窗口的运用与技巧(转)
//关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();< ...
- Web最基本的弹出窗口代码(javascript)
[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.h ...
最新文章
- mysql 执行计划 什么用_简述MySQL的执行计划的作用及使用方法
- Android实现导航菜单左右滑动效果
- 2019年1月14日【第一天正式学习】
- 与、或、短路或、自增、自减、的执行过程
- 人工智能教程007:创建一个卷积神经网络(2)
- 「拥抱开源, 又见 .NET」系列第三次线下活动简报
- 容器编排技术 -- Kubernetes 重新配置活动集群中节点的 Kubelet
- 减少浏览器的兼容性问题
- y空间兑换代码_loam代码解析3
- nsautoreleasepool研究
- 这个高颜值的开源第三方网易云音乐播放器你值得拥有
- java adminlte 使用_AdminLTE框架基础布局使用
- python PPT批量制作封面图及导出视频教程
- java 计算器 正负号转换_【计算器正负号】一个小程序,有点问题
- 《网页配色密码》 一本易读实用的好书
- 黑苹果16g内存够用吗_刚脱坑黑苹果,给想装黑苹果的几个建议
- 服务器销售工资如何计算公式,拿提成的工资怎么算的有公式吗
- NVIDIA,怎么查看显卡
- javascript之动态时钟
- 腾讯云运维工程师认证(TCA)在线测试题
热门文章
- matlab绘制螺旋线+隐藏坐标轴+更改背景颜色
- 计算机课上玩的打字游戏,人教版信息技术三上第7课《玩打字游戏》教案.doc
- created不能异步_详解vue中async-await的使用误区
- Biological network analysis with deep learning(使用深度学习的生物网络分析)
- 软件开发委托协议(个人)
- mybatis的一级缓存详解
- 使用Keras和DDPG玩赛车游戏(自动驾驶)
- 【考研经验】2019年浙江大学软件学院考研经验分享, 双非_二战_妹纸_跨考_上岸!...
- 微信里扫描二维码弹出默认浏览器(苹果打开App Store)打开app的下载链接怎么实现
- kl-scroll-text (文字滚动)