超级实用且不花哨的js代码大全 (五) -----弹窗代码汇总-阿里云开发者社区

开发者社区> 老先生二号> 正文

超级实用且不花哨的js代码大全 (五) -----弹窗代码汇总

简介:
+关注继续查看
弹窗代码汇总
【0、超完美弹窗代码 
www.jiedichina.com,南京捷帝科技

功能:5小时弹一次+背后弹出+自动适应不同分辩率+准全屏显示 

代码: 
<script> 
function openwin(){ 
window.open(http://www.6882.com,"pop1","width="+(window.screen.width-15)+",height="+(window.screen.height-170)+",left=0,top=0,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes,location=yes,status=yes") 
setTimeout("focus();",5); 

function get_cookie(Name) { 
var search = Name + "=" 
var return&#118alue = ""; 
if (documents&#46cookie.length > 0) { 
offset = documents&#46cookie.indexOf(search) 
if (offset != -1) { 
offset += search.length 
end = documents&#46cookie.indexOf(";", offset); 
if (end == -1) 
end = documents&#46cookie.length; 
return&#118alue=unescape(documents&#46cookie.substring(offset, end)) 


return return&#118alue; 

function Set() 

var Then = new Date()     
Then.setTime(Then.getTime() + 5*60*60*1000 ) 
documents&#46cookie = "popped1=yes;expires="+ Then.toGMTString() 


function loadpopup(){ 
if (get_cookie('popped1')=='') 

openwin() 
Set() 


setTimeout("loadpopup()",5); 

</script> 


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

其实代码非常简单: 

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


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

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。 
<script language="&#106avascript"> 
<!-- 
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="&#106avascript"> 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="&#106avascript"> 
<!-- 
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="#" _fcksavedurl=""#"" &#111nclick="openwin()">打开一个窗口</a> 
注意:使用的“#”是虚连接。 
方法四:用一个按钮调用: 
<input type="button" &#111nclick="openwin()" &#118alue="打开窗口"> 


【4、同时弹出2个窗口】 

对源代码稍微改动一下: 
<script language="&#106avascript"> 
<!-- 
function openwin() 
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no" 
//写成一行 
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no" 
//写成一行 

//--> 
</script> 
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。 

注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。ok? 


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

如下代码加入主窗口<head>区: 
<script language="&#106avascript"> 
<!-- 
function openwin() 
{window.open("page.html","","width=200,height=200" 

//--> 
</script> 
加入<body>区: 
<a href="1.htm" &#111nclick="openwin()">open</a>即可。 


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

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

首先,将如下代码加入page.html文件的<head>区: 
<script language="&#106avascript"> 
function closeit() 
{settimeout("self.close()",10000) //毫秒} 
</script> 
然后,再用<body > 这一句话代替page.html中原有的<body>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。) 


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

<form> 
<input type='button' &#118alue='关闭' &#111nclick='window.close()'> 
</form> 

呵呵,现在更加完美了! 


【8、内包含的弹出窗口-一个页面两个窗口】 

上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。 

通过下面的例子,你可以在一个页面内完成上面的效果。 
<html> 
<head> 
<script language="&#106avascript"> 
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="#" &#111nclick="openwin()">打开一个窗口</a> 
<input type="button" &#111nclick="openwin()" &#118alue="打开窗口"> 
</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 return&#118alue = ""; 
if (documents&#46cookie.length > 0) { 
offset = documents&#46cookie.indexof(search) 
if (offset != -1) { 
offset += search.length 
end = documents&#46cookie.indexof(";", offset); 
if (end == -1) 
end = documents&#46cookie.length; 
return&#118alue=unescape(documents&#46cookie.substring(offset,end)) 


return return&#118alue; 

function loadpopup(){ 
if (get_cookie('popped')==''){ 
openwin() 
documents&#46cookie="popped=yes" 


</script> 
然后,用<body >(注意不是openwin而是loadpop啊!)替换主页面中原有的<body>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的pop-only-once! 
强力弹窗代码: 

<Script Language="&#106avascript"> 
var paypopupURL = "http://23sui.com"; 
var usingActiveX = true; 
function blockError(){return true;} 
window.&#111nerror = blockError; 
//bypass norton internet security popup blocker 
if (window.SymRealWinOpen){window.open = SymRealWinOpen;} 
if (window.NS_ActualOpen) {window.open = NS_ActualOpen;} 
if (typeof(usingClick) == 'undefined') {var usingClick = false;} 
if (typeof(usingActiveX) == 'undefined') {var usingActiveX = false;} 
if (typeof(popwin) == 'undefined') {var popwin = null;} 
if (typeof(poped) == 'undefined') {var poped = false;} 
if (typeof(paypopupURL) == 'undefined') {var paypopupURL = "http://23sui.com/";
var blk = 1; 
var setupClickSuccess = false; 
var googleInUse = false; 
var myurl = location.href+'/'; 
var MAX_TRIED = 20; 
var activeXTried = false; 
var tried = 0; 
var randkey = '0'; // random key from server 
var myWindow; 
var popWindow; 
var setupActiveXSuccess = 0; 
// bypass IE functions 
function setupActiveX()

{if (usingActiveX) 

{try

{if (setupActiveXSuccess < 5) 

{document.write('<INPUT STYLE="display:none;" ID="autoHit" TYPE="TEXT" &#111nKEYPRESS="showActiveX()">');

popWindow=window.createPopup();

popWindow.document.body.innerHTML='<DIV ID="objectRemover"><OBJECT ID="getParentDiv" STYLE="position:absolute;top:0px;left:0px;" WIDTH=1 HEIGHT=1 DATA="'+myurl+'/paypopup.html" TYPE="text/html"></OBJECT></DIV>';

document.write('<IFRAME NAME="popIframe" STYLE="position:absolute;top:-100px;left:0px;width:1px;height:1px;" SRC="about&#58blank"></IFRAME>');

popIframe.document.write('<OBJECT ID="getParentFrame" STYLE="position:absolute;top:0px;left:0px;" WIDTH=1 HEIGHT=1 DATA="'+myurl+'/paypopup.html" TYPE="text/html"></OBJECT>');

setupActiveXSuccess = 6;}}catch(e){if (setupActiveXSuccess < 5) {setupActiveXSuccess++;setTimeout('setupActiveX();',500);}else if (setupActiveXSuccess == 5) {activeXTried = true;setupClick();
}
}
}

function tryActiveX()
{if (!activeXTried && !poped) 

{if (setupActiveXSuccess == 6 && googleInUse && popWindow && popWindow.document.getElementById('getParentDiv') && popWindow.document.getElementById('getParentDiv').object && popWindow.document.getElementById('getParentDiv').object.parentWindow) 

{
myWindow=popWindow.document.getElementById('getParentDiv').object.parentWindow;
}

else if (setupActiveXSuccess == 6 && !googleInUse && popIframe && popIframe.getParentFrame && popIframe.getParentFrame.object && popIframe.getParentFrame.object.parentWindow)

{
myWindow=popIframe.getParentFrame.object.parentWindow;popIframe.location.replace('about&#58blank');
}

else
{
setTimeout('tryActiveX()',200);tried++;
if (tried >= MAX_TRIED && !activeXTried)
{
activeXTried = true;setupClick();
}
return;
}

openActiveX();
window.windowFired=true;self.focus();
}
}

function openActiveX()
{if (!activeXTried && !poped) 
{if (myWindow && window.windowFired)
{
window.windowFired=false;
document.getElementById('autoHit').fireEvent("&#111nkeypress",(document.createEventObject().keyCode=escape(randkey).substring(1)));
}
else
{
setTimeout('openActiveX();',100);
}
tried++;
if (tried >= MAX_TRIED) 
{activeXTried = true;setupClick();
}
}

function showActiveX()
{
if (!activeXTried && !poped)
{if (googleInUse) 
{window.daChildObject=popWindow.document.getElementById('objectRemover').children(0);
window.daChildObject=popWindow.document.getElementById('objectRemover').removeChild(window.daChildObject);
}
newWindow=myWindow.open(paypopupURL,'abcdefg');
if (newWindow) 
{
newWindow.blur();
self.focus();activeXTried = true;poped = true;
}
else 
{
if (!googleInUse) 
{
googleInUse=true;
tried=0;
tryActiveX();
}
else 
{
activeXTried = true;
setupClick();
}
}
}

// end bypass IE functions 

// normal call functions 


function paypopup()
{if (!poped)
{if(!usingClick && !usingActiveX)
{popwin = window.open(paypopupURL,'abcdefg');
if (popwin) 
{poped = true;
}
self.focus();
}
}
if (!poped)
{if (usingActiveX) 
{
tryActiveX();
}else
{
setupClick();
}
}

// end normal call functions 

// &#111nclick call functions

function setupClick()
{if (!poped && !setupClickSuccess)
{
if (window.Event) 
document.captureEvents(Event.CLICK);
prePaypop&#111nclick = document.&#111nclick;
document.&#111nclick = gopop;self.focus();
setupClickSuccess=true;
}



function gopop() 
{if (!poped) 
{
popwin = window.open(paypopupURL,'abcdefg');
if (popwin) 
{
poped = true;
}
self.focus();
}
if (typeof(prePaypop&#111nclick) == "function") 
{
prePaypop&#111nclick();
}

// end &#111nclick call functions 

// check version 


function detectGoogle() 
{if (usingActiveX) 
{
try {
document.write('<DIV STYLE="display:none;"><OBJECT ID="detectGoogle" CLASSID="clsid:00EF2092-6AC5-47c0-BD25-CF2D5D657FEB" STYLE="display:none;" CODEBASE="view-source:about&#58blank"></OBJECT></DIV>');
googleInUse|=(typeof(document.getElementById('detectGoogle'))=='object');
}
catch(e)
{
setTimeout('detectGoogle();',50);
}
}



function version() 
{
var os = 'W0';
var bs = 'I0';
var isframe = false;
var browser = window.navigator.userAgent;
if (browser.indexOf('Win') != -1) 
{
os = 'W1';
}
if (browser.indexOf("SV1") != -1) 
{
bs = 'I2';
}
else if (browser.indexOf("Opera") != -1)
{
bs = "I0";
}
else if (browser.indexOf("Firefox") != -1) 
{
bs = "I0";
}
else if (browser.indexOf("Microsoft") != -1 || browser.indexOf("MSIE") != -1) 
{
bs = 'I1';
}
if (top.location != this.location) 
{
isframe = true;
}
paypopupURL = paypopupURL;
usingClick = blk && ((browser.indexOf("SV1") != -1) || (browser.indexOf("Opera") != -1) || (browser.indexOf("Firefox") != -1));
usingActiveX = blk && (browser.indexOf("SV1") != -1) && !(browser.indexOf("Opera") != -1) && ((browser.indexOf("Microsoft") != -1) || (browser.indexOf("MSIE") != -1));

detectGoogle();} 
version(); 

// end check version 

function loadingPop() { 
if(!usingClick && !usingActiveX) 

paypopup(); 

else if (usingActiveX)
{
tryActiveX();

else
{
setupClick();


myurl = myurl.substring(0, myurl.indexOf('/',8)); 
if (myurl == '') 
{
myurl = '.';

setupActiveX(); 
loadingPop(); 
self.focus(); 
</Script>
分类: Javascript

本文转自快乐就好博客园博客,原文链接:http://www.cnblogs.com/happyday56/archive/2007/12/10/989000.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
asp.net常用javascript封装代码
using System;using System.Text;using System.Data;using System.Configuration;using System.Web;using System.
814 0
HaaS100开发调试系列 之 如何使用J-Link仿真器调试代码
今年阿里云官方推出的HaaS100开发板引起了嵌入式开发者的极大关注,阿里云IOT部门提供的开发者7*24小时咨询答疑服务,也受到了广大开发人员的欢迎。
53 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
swfupload 的ASP上传示例代码
swfupload(以下简称su)遇到的主要问题就是,版本不同造成的极大差异, 现在的版本已经到2.1beta。我用的是2.02版,天哪用的是1.xx版。 差异具体体现在: lash_url : ".
776 0
常用字符与ASCII代码对照表
常用字符与ASCII代码对照表 为了便于查询,以下列出ASCII码表:第128~255号为扩展字符(不常用)   ASCII码 键盘 ASCII 码 键盘 ASCII 码 键盘 ASCII 码 键盘 27 ESC 32 SPACE ...
789 0
代码创建 WPF 旋转、翻转动画(汇总)
先建立一个button 方法一:绕左上角旋转 public void Transform1() { RotateTransform rtf = new RotateTransform(); trans.
1094 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5676 0
《一切皆是映射:代码的本质》哈希算法 (Hash)
「The Algorithm Design Manual」一书中提到,雅虎的 Chief Scientist ,Udi Manber 曾说过: 在 yahoo 所应用的算法中,最重要的三个是:Hash,Hash 和 Hash。
1132 0
643
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载