弹窗代码汇总
功能: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()结束啊。
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(有解决的办法吗?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>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层、弹窗效果+拖曳功能 </title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;}
.botton{ color:#F00; cursor:pointer;}
.mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff}
#cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;}
#cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;}
#cwxCn{ background:#FFF; display:block;}
.imgd{ width:400px; height:300px;}
</style>
</head>
<body>
<!--弹出窗-->
<div class="mybody">
<div class="botton" id="testClick">点击测试</div>
asdasdasdasdasdasdasd<br/>这里是一段文字哦!<div class="botton" id="testClick1">点击测试</div>
</div>
<script type="text/javascript">
C$('testClick').onclick = function () {
var neirong = '<div><img src="http://images.cnblogs.com/logo.gif" class="imgd" /></div>';
cwxbox.box.show(neirong);
}
C$('testClick1').onclick = function () {
var neirong = '123456789132456789';
cwxbox.box.show(neirong, 3);
}
function C$(id) { return document.getElementById(id); }
//定义窗体对象
var cwxbox = {};
cwxbox.box = function () {
var bg, wd, cn, ow, oh, o = true, time = null;
return {
show: function (c, t, w, h) {
if (o) {
bg = document.createElement('div'); bg.id = 'cwxBg';
wd = document.createElement('div'); wd.id = 'cwxWd';
cn = document.createElement('div'); cn.id = 'cwxCn';
document.body.appendChild(bg);
document.body.appendChild(wd);
wd.appendChild(cn);
bg.onclick = cwxbox.box.hide;
window.onresize = this.init;
window.onscroll = this.scrolls;
o = false;
}
if (w && h) {
var inhtml = '<iframe src="' + c + '" width="' + w + '" height="' + h + '" frameborder="0"></iframe>';
} else {
var inhtml = c;
}
cn.innerHTML = inhtml;
oh = this.getCss(wd, 'offsetHeight');
ow = this.getCss(wd, 'offsetWidth');
this.init();
this.alpha(bg, 50, 1);
this.drag(wd);
if (t) {
time = setTimeout(function () { cwxbox.box.hide() }, t * 1000);
}
},
hide: function () {
cwxbox.box.alpha(wd, 0, -1);
clearTimeout(time);
},
init: function () {
bg.style.height = cwxbox.page.total(1) + 'px';
bg.style.width = '';
bg.style.width = cwxbox.page.total(0) + 'px';
var h = (cwxbox.page.height() - oh) / 2;
wd.style.top = (h + cwxbox.page.top()) + 'px';
wd.style.left = (cwxbox.page.width() - ow) / 2 + 'px';
},
scrolls: function () {
var h = (cwxbox.page.height() - oh) / 2;
wd.style.top = (h + cwxbox.page.top()) + 'px';
},
alpha: function (e, a, d) {
clearInterval(e.ai);
if (d == 1) {
e.style.opacity = 0;
e.style.filter = 'alpha(opacity=0)';
e.style.display = 'block';
}
e.ai = setInterval(function () { cwxbox.box.ta(e, a, d) }, 40);
},
ta: function (e, a, d) {
var anum = Math.round(e.style.opacity * 100);
if (anum == a) {
clearInterval(e.ai);
if (d == -1) {
e.style.display = 'none';
if (e == wd) {
this.alpha(bg, 0, -1);
}
} else {
if (e == bg) {
this.alpha(wd, 100, 1);
}
}
} else {
var n = Math.ceil((anum + ((a - anum) * .5)));
n = n == 1 ? 0 : n;
e.style.opacity = n / 100;
e.style.filter = 'alpha(opacity=' + n + ')';
}
},
getCss: function (e, n) {
var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e, null);
if (e_style.display === 'none') {
var clonDom = e.cloneNode(true);
clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
document.body.appendChild(clonDom);
var wh = clonDom[n];
clonDom.parentNode.removeChild(clonDom);
return wh;
}
return e[n];
},
drag: function (e) {
var startX, startY, mouse;
mouse = {
mouseup: function () {
if (e.releaseCapture) {
e.onmousemove = null;
e.onmouseup = null;
e.releaseCapture();
} else {
document.removeEventListener("mousemove", mouse.mousemove, true);
document.removeEventListener("mouseup", mouse.mouseup, true);
}
},
mousemove: function (ev) {
var oEvent = ev || event;
e.style.left = oEvent.clientX - startX + "px";
e.style.top = oEvent.clientY - startY + "px";
}
}
e.onmousedown = function (ev) {
var oEvent = ev || event;
startX = oEvent.clientX - this.offsetLeft;
startY = oEvent.clientY - this.offsetTop;
if (e.setCapture) {
e.onmousemove = mouse.mousemove;
e.onmouseup = mouse.mouseup;
e.setCapture();
} else {
document.addEventListener("mousemove", mouse.mousemove, true);
document.addEventListener("mouseup", mouse.mouseup, true);
}
}
}
}
} ()
cwxbox.page = function () {
return {
top: function () { return document.documentElement.scrollTop || document.body.scrollTop },
width: function () { return self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth },
height: function () { return self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight },
total: function (d) {
var b = document.body, e = document.documentElement;
return d ? Math.max(Math.max(b.scrollHeight, e.scrollHeight), Math.max(b.clientHeight, e.clientHeight)) :
Math.max(Math.max(b.scrollWidth, e.scrollWidth), Math.max(b.clientWidth, e.clientWidth))
}
}
} ()
</script>
</body>
</html>
//-----------按钮提示框----------//
<input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););
//-----------按钮提示框----------//
<input type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗?');
//-----------提交按钮----------//
<input type="button" value="提交" onclick="javaScript:window.location.href='http://angelialily.javaeye.com/';"/>
//-----------关闭按钮----------//
<input type="button" value="关闭" onclick="javaScript:window.close();">
//-----------返回并关闭连接----------//
<a href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回</a>
javaScript:window.location.reload();//返回当前页并刷新
//-----------返回上一级页面----------//
<input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>
//关闭,父窗口弹出对话框,子窗口直接关闭
this.Response.Write("<script language=javascript>window.close();</script>");
//关闭,父窗口和子窗口都不弹出对话框,直接关闭
this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");
//弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有
this.Response.Write("<script language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>");
//弹出窗口刷新当前页面
this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>");
this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script>");
//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)
this.Response.Write(" <script language=javascript>alert('注册成功'); window.window.location.href='WebForm2.aspx';</script> ");
//关闭当前子窗口,刷新父窗口
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");
this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");
//子窗口刷新父窗口
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>");
//弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)
this.Response.Write("<script language='javascript'>alert('发表成功!');window.open('WebForm2.aspx')</script>");
//弹出提示窗口,确定后,刷新父窗口
this.Response.Write("<script>alert('发表成功!');window.opener.location.href=window.opener.location.href;</script>");
阿里云: www.aliyun.com
华赐软件: www.huacisoft.com
C#开源社区: www.opencsharp.net
清泓美肤苑: 清泓美肤苑
bootstrap权限管理系统: Asp.Net Mvc3 bootstrap权限管理系统