JS弹出窗口


转载链接：http://www.jb51.net/article/32747.htm


如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，我们今天就来学习一下： 
1.弹启一个全屏窗口 

windows.open('http://www.jb51.net','脚本之家','fullscreen');

2.弹启一个被F11化后的窗口  
windows.open('http://www.jb51.net','脚本之家','channelmode');

3.弹启一个带有收藏链接工具栏的窗口  
windows.open('www.wangye8.com','脚本之家','width=400,height=300,directories');

4.网页对话框  
<html> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
showModalDialog('http://www.jb51.net,'脚本之家','dialogWidth:400px;dialogHeight:300px; 
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') 
//--> 
</SCRIPT> 
<b>www.wangye8.com</b> 
</body> 
</html> 
<html> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
showModelessDialog('http://www.jb51.net,'脚本之家','dialogWidth:400px;dialogHeight:300px; 
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') 
//--> 
</SCRIPT> 
<b>http://www.wangye8.com</b> 
</body> 
</html>

showModalDialog()或是showModelessDialog() 来调用网页对话框，至于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口（简称模式窗口），置在父窗口上，必须关闭才能访问父窗口(建议尽量少用，以免招人反感)；showModelessDialog() 
dialogHeight: iHeight 设置对话框窗口的高度。 
dialogWidth: iWidth 设置对话框窗口的宽度。 
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。 
dialogTop: 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”。


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


【最基本的弹出窗口代码】  
<SCRIPT LANGUAGE="java script"> 
<!-- 
window.open ('page.html') 
--> 
</SCRIPT>

因为这是一段java script代码，所以它们应该放在<SCRIPT LANGUAGE ="java script">标签和</script>之间。<!--和-->是对一些版本低的浏览器起作用，在这些老浏览器中如果不支持java script，不会将标签中的代码作为文本显示出来。 
Window.open ('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。 
用单引号和双引号都可以，只是不要混用。 
这一段代码可以加入HTML的任意位置，加入到<head>和</head>之间也可以，位置越靠前执行越早，尤其是页面代码较长时，又想使页面早点弹出就尽量往前放。


【经过设置后的弹出窗口】 
下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。 
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。  
<SCRIPT LANGUAGE="java 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>
参数解释： 
<SCRIPT LANGUAGE="java script"> 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="java script"> 
<!-- 
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 > 
...任意的页面内容... 
</body> 
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？ 
方法一：<body > 浏览器读页面时弹出窗口； 
方法二：<body > 浏览器离开页面时弹出窗口； 
方法三：用一个连接调用：<a href="#" >打开一个窗口</a> 
注意：使用的"#"是虚连接。 
方法四：用一个按钮调用：<input type="button" value="打开窗口"> 


【主窗口打开文件1.htm，同时弹出小窗口page.html】 
将如下代码加入主窗口<head>区：  
<script language="java script"> 
<!-- 
function openwin(){ 
window.open("page.html","","width=200,height=200" ;) 
} 
//--> 
</script>

加入<body>区：<a href="1.htm" >open</a>即可。 

【弹出的窗口之定时关闭控制】 
下面我们再对弹出窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面（注意是加入到page.html的HTML中，可不是主页面中，否则…），让它在10秒钟后自动关闭是不是更酷了？ 
首先，将如下代码加入page.html文件的<head>区：  
<script language="java script"> 
function closeit() { 
setTimeout("self.close()",10000) //毫秒 
} 
</script>

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


【在弹出窗口中加上一个关闭按钮】  
<form> 
<INPUT TYPE='BUTTON' value='关闭' 
</form>

【内包含的弹出窗口——一个页面两个窗口】 
上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。 
通过下面的例子，你可以在一个页面内完成上面的效果。  
<html> 
<head> 
<SCRIPT LANGUAGE="java script"> 
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="#" >打开一个窗口</a> 
<input type="button" value="打开窗口"> 
</body> 
</html>

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


【终极应用——弹出窗口的Cookie控制】 
回想一下，上面的弹出窗口虽然酷，但是有一点小毛病（你沉浸在喜悦之中，一定没有发现吧？）比如你将上面的脚本放在一个需要频繁经过的页面里（例如首页），那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？有解决的办法吗？Yes!Follow me。我们使用Cookie来控制一下就可以了。 
首先，将如下代码加入主页面HTML的<HEAD>区：  
<script> 
function openpopup(){ 
window.open("hello.htm","","width=300,height=300") //自己修改弹出窗口 
} 
function get_cookie(Name) { 
var search = Name + "=" 
var returnvalue = ""; 
if (documents.cookie.length > 0) { 
offset = documents.cookie.indexOf(search) 
if (offset != -1) { // if cookie exists 
offset += search.length 
// set index of beginning of value 
end = documents.cookie.indexOf(";", offset); 
// set index of end of cookie value 
if (end == -1) 
end = documents.cookie.length; 
returnvalue=unescape(documents.cookie.substring(offset, end)) 
} 
} 
return returnvalue; 
} 
function loadpopup(){ 
if (get_cookie('popped')==''){ 
openpopup() 
documents.cookie="popped=yes" 
} 
} 
</script> 
</head>

将如下代码键入BODY区： 
<body > //pop when leave page 
或者： 
<body > //pop when enter page 
你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once! 
写到这里，弹出窗口的制作和应用技巧基本上算是讲完了，希望对正在制作网页的朋友有所帮助我就非常欣慰了。 
需要注意的是，JS脚本中的大小写最好前后保持一致。 
没有菜单、工具栏、地址栏的弹出窗口：  
<script language="java script"> 
<!-- 
var gt = unescape('%3e'); 
var popup = null; 
var over = "Launch Pop-up Navigator"; 
popup = window.open('', 'popupnav', 'width=500,height=500,resizable=0,scrollbars=auto'); // width=500,height=500为窗口长和宽 
if (popup != null) { 
if (popup.opener == null) { 
popup.opener = self; } 
popup.location.href = '要打开的文件名'; 
} 
// --> 
</script>

方法二:Cookies应用：控制弹出窗口 当我们在一个页面中设置一个POP弹出窗口后，每次只要重新浏览该页面，POP窗口就会自动弹出来，造成不必要的麻烦。那么怎么解决这个问题呢？ 我在这里用一个简单的例子讲解一下如何通过操作Cookies让弹出窗口只在第一次浏览该页面时弹出，以后就不再招人烦了！  
<script> 
function openpopwindow() { 
  window.open("hello.htm","","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) { // 如果以前有cookies记录 
        offset += search.length; // 设置cookie的起始位置 
        end = documents.cookie.indexOf(";", offset); // 设置cookie的结束位置 
        if (end == -1) end = documents.cookie.length; 
        returnvalue=unescape(documents.cookie.substring(offset, end)) 
    } 
  } 
  return returnvalue; 
} 


function loadpopup() { 
  if (get_cookie('popped')=='') { 
    openpopwindow(); documents.cookie="popped=yes"; 
  } 
} 


</script>

将上面的代码键入BODY区： <body > //离开页面的时候弹出 
或者： <body > //打开页面的时候弹出 

离开页面时弹开窗口效果: 
效果：别人关闭这个页面的时候，弹出一个窗口，你可以写一些祝福的话  
<script LANGUAGE="javascript"> 
<!--Begin function leave(){ 
window.open 
('1.htm',",'toolbar=no,menubar=no,location=no,height=225,width=235'); 
break 
} 
//END--> 
</script>

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

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

相关文章

跟各位读者朋友分享下公众号运营策略

跟各位读者朋友分享下公众号运营策略

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;加群交流学习。目前我的公众号运营策略&#xff0c;分享给各位读者朋友。点击下方卡片关注我&#xff0c;或者查看源码等系列文章。可能大多数关注的人不知道&#xff0c;我的公众号取名为若川视野的原因。「若…
阅读更多...
[轉載]用PHP的ob_start();控制您的浏览器cache!

[轉載]用PHP的ob_start();控制您的浏览器cache!

FROM http://www.phpchina.com/html/28/1628-3870.html Output Control 函数可以让你自由控制脚本中数据的输出。它非常地有用&#xff0c;特别是对于&#xff1a;当你想在数据已经输出后&#xff0c;再输出文件头的情况。输出控制函数不对使用 header() 或 setcookie(), 发送的…
阅读更多...
oracle 带有变量的语句_【成都校区】Oracle SQL语句之常见优化方法总结

oracle 带有变量的语句_【成都校区】Oracle SQL语句之常见优化方法总结

本帖出自于黑马程序员成都中心&#xff0c;更多资源可关注微信公众号1、SQL语句尽量用大写的&#xff1b;因为oracle总是先解析SQL语句&#xff0c;把小写的字母转换成大写的再执行。2、使用表的别名&#xff1a; 当在SQL语句中连接多个表时, 尽量使用表的别名并把别名前缀于每…
阅读更多...
js 获取上下文后面的路径_通过在数据后面显示上下文来可视化公众意见

js 获取上下文后面的路径_通过在数据后面显示上下文来可视化公众意见

js 获取上下文后面的路径In 1824, The Harrisburg Pennsylvanian, a newspaper from a town in Pennsylvania conducted the first known public opinion polls in history, and successfully predicted the result of the vote in the close race between Andrew Jackson and …
阅读更多...
甘肃甘南步班邮递员：草原上的“递爱”艰途

甘肃甘南步班邮递员：草原上的“递爱”艰途

图为甘肃甘南藏族自治州碌曲县郎木寺镇邮政支局的投递员进行投递工作。&#xff08;资料图&#xff09; 钟欣 摄 中新网兰州1月25日电 (吴玉蒿)渐近春节&#xff0c;刘权英投递邮件的工作愈加繁重。现年45岁的刘权英是甘肃甘南藏族自治州碌曲县郎木寺镇邮政支局的一名投递员。由…
阅读更多...
核心编程6——线程

核心编程6——线程

Note 0:了进程实际是由两个组件组成的:一个进程内核对象和一个地址空间.类似地,线程也由两个组件组成:一个是线程的内核对象,操作系统用它管理线程.内核对象还是系统用来存放线程统计信息的地方.一个线程堆栈,用于维护线程执行时所需的所有函数参数和局部变量.Note 1:进程是有惰…
阅读更多...
PHP解决抢购、秒杀、抢楼、抽奖等阻塞式高并发库存防控超量的思路方法

PHP解决抢购、秒杀、抢楼、抽奖等阻塞式高并发库存防控超量的思路方法

转载链接&#xff1a;http://www.4u4v.net/thinking-approach-to-buy-spike-grab-floor-sweepstakes-and-other-high-concurrent-blocking-prevention-excess-inventory-solve-php.html 如今在电商行业里,秒杀抢购活动已经是商家常用促销手段。但是库存数量有限&#xff0c;而同…
阅读更多...
看了就会的 Node.js 三大基础模块常用 API

看了就会的 Node.js 三大基础模块常用 API

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12&#xff0c;加群交流学习。今天分享一篇nodejs基础的文章。点击下方卡片关注我&#xff0c;或者查看源码等系列文章。在日常使用 Node 进行开发的时候&#xff0c;会使用到一些文件系统、路径操作等基础 API&#xff0c;这…
阅读更多...
vue-cli3插件初体验

vue-cli3插件初体验

vue-cli3发布自2018年8月&#xff0c;距离现在还不是特别久&#xff0c;最好搭建项目刚好用到&#xff0c;所以写下这篇文章&#xff0c;记录一下踩坑经历。vue的作者说过&#xff0c;vue-cli的本质是模版的拉取&#xff0c;太多的配置导致了模版的难以维护&#xff0c;所以重构…
阅读更多...
ios设计登录功能_亲爱的产品设计师，这是iOS 14的新功能

ios设计登录功能_亲爱的产品设计师，这是iOS 14的新功能

ios设计登录功能On June 22, 2020 Apple previewed iOS 14 for the first time. As always there are quite some changes you should know about as a product designer like widgets, pickers, app clips, permissions and more.2020年6月22日&#xff0c;Apple首次预览iOS 1…
阅读更多...
c++ int 转 short_C/C++结构体内存对齐

c++ int 转 short_C/C++结构体内存对齐

在面试或工作中&#xff0c;经常会遇到内存对齐的问题。这里结合我的理解谈一谈对内存对齐的理解。1. 为什么要内存对齐&#xff0c;不对齐会怎么样&#xff1f;内存中存放数据是为了给CPU使用&#xff0c;CPU访问内存数据时会受到地址总线宽度的限制&#xff0c;也就是一次能从…
阅读更多...
对于日访问量达到1W IP的处理方法

对于日访问量达到1W IP的处理方法

转自&#xff1a;http://www.java123.net/56026-2.html 对于日访问量达到1W IP的处理方法 一、1万ip真是不高&#xff1a; 1.常用数据用缓存&#xff0c;减轻数据库压力。 2.详细页数据生成静态页面。 二、10000算是相当小的了,不需要什么特殊的处理机制,只要符合最一般的…
阅读更多...
数据契约（DataContract）

数据契约（DataContract）

WCF第一要素就是契约: 服务契约用于声明可用于远程访问的类型。在Interface或class开始处使用服务契约标签. [ServiceContract] Public interface Iservice { } 接口调用契约的好处: 1. 同一服务类型可以实现多个不相干的服务契约. 2. 有利于版本升级 3. 按照…
阅读更多...
jakob slam_Jakob Nielsen针对用户界面设计的第二种可用性启发法

jakob slam_Jakob Nielsen针对用户界面设计的第二种可用性启发法

jakob slamIn the pursuit of providing great user experiences, it’s imperative that digital products are evaluated. A 为了提供出色的用户体验&#xff0c;必须对数字产品进行评估。 一个 heuristic evaluation is essential to delivering great user experiences. I…
阅读更多...
微软Office 365正式上架Mac App Store

微软Office 365正式上架Mac App Store

今天&#xff0c;Office 365正式在Mac App Store上架&#xff0c;Mac用户可以轻松下载Word&#xff0c;Outlook&#xff0c;Excel&#xff0c;PowerPoint&#xff0c;OneNote以及整套微软的热门应用程序。用户还可以从应用程序内订购Office 365。苹果全球开发者关系高级主管Sha…
阅读更多...
一文搞懂浏览器原理

一文搞懂浏览器原理

大家好&#xff0c;我是若川。最近这几年&#xff0c;云计算的普及和 HTML5 技术的快速发展&#xff0c;越来越多的应用转向了浏览器 / 服务器&#xff08;B/S&#xff09;架构&#xff0c;这种改变让浏览器的重要性与日俱增&#xff0c;视频、音频、游戏几大核心场景也都在逐渐…
阅读更多...
python处理excel可视化_python如何将excel数据处理可视化

python处理excel可视化_python如何将excel数据处理可视化

python将excel数据处理可视化的方法&#xff1a;首先安装xlrd与xlwt库&#xff0c;进行表格读取&#xff1b;然后使用pyecharts生成Echarts图表的类库&#xff1b;最后安装Echarts读取Excel数据及显示即可。python将excel数据处理可视化的方法&#xff1a;Excel表操作python操作…
阅读更多...
dataframe中将一列数据切分成多列

dataframe中将一列数据切分成多列

为什么80%的码农都做不了架构师&#xff1f;>>> 原sheet中数据 目的 将【备注】列切分成【key】列和【value】列 Python sheet[key] sheet[备注].str.extract(r(_.*(?\u503c))) sheet[value] sheet[备注].str.extract(r((?<).*))结果 参考 pandas.Series.st…
阅读更多...
matplotlib可视化_EDA：Geopandas，Matplotlib和Bokeh中的可视化

matplotlib可视化_EDA：Geopandas，Matplotlib和Bokeh中的可视化

matplotlib可视化Nowadays, everyone is immersed with plenty of data from news sources, cellphones, laptops, workplaces, and so on. Data conveys with tons of information from different data variables like date, string, numeric, and geographical format. How t…
阅读更多...
(转)结婚那天，妈问我：坐在角落里象两个要饭模样的人是谁?

(转)结婚那天，妈问我：坐在角落里象两个要饭模样的人是谁?

人人看到的文章 很感人~~~~结婚那天&#xff0c;妈问我&#xff1a;坐在角落里象两个要饭模样的人是谁&#xff1f; 我看过去的时候&#xff0c;有个老头正盯着我&#xff0c;旁边还有个老太太&#xff0c;发现我看着他们时赶忙低下头。我不认识他们但也不象要饭的&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023