js弹出框、对话框、提⽰框、弹窗实现⽅法总结（推荐）⼀、JS的三种最常见的对话框
//====================== JS最常⽤三种弹出对话框 ========================
//弹出对话框并输出⼀段提⽰信息
function ale() {
//弹出⼀个对话框
alert("提⽰信息！");
}
//弹出⼀个询问框，有确定和取消按钮
function firm() {
//利⽤对话框返回的值（true 或者 false）
if (confirm("你确定提交吗？")) {
alert("点击了确定");
}
else {
alert("点击了取消");
}
}
//弹出⼀个输⼊框，输⼊⼀段⽂字，可以提交
function prom() {
var name = prompt("请输⼊您的名字", ""); //将输⼊的内容赋给变量 name ，
//这⾥需要注意的是，prompt有两个参数，前⾯是提⽰的话，后⾯是当对话框出来后，在对话框⾥的默认值
if (name)//如果返回的有内容
{
alert("欢迎您：" + name)
}html自动弹出公告代码
}
⼆、点击按钮时常⽤的6中提⽰框和操作
<!-----------按钮提⽰框---------->
<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='www.baidu';"/>
<!-----------关闭按钮---------->
<input type="button" value="关闭" onclick="javaScript:window.close();">
<!-----------返回并关闭连接---------->
<a href="#" onclick="javascript:;window.load();window.close()">返回</a>
javaScript:load();//返回当前页并刷新
<!-----------返回上⼀级页⾯---------->
<input type="button" name="button" value="< 返回" onclick="(-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.place(window.ferrer);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>");
//弹出相同的⼀页
<INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)">
//
Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");
<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') //这句要写成⼀⾏
-->
参数解释：
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为允许；
'newwin'：隐藏菜单栏地址栏⼯具条
四、弹出窗⼝实例演⽰
//1、最基本的弹出窗⼝代码
window.open ('page.html')
//2、经过设置后的弹出窗⼝
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') //这句要写成⼀⾏
//参数解释：
//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为允许；
//3、⽤函数控制弹出窗⼝
function openwin() {
window.open("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成⼀⾏
}
$(document).ready(fucntion(){
openwin();
});
//这⾥定义了⼀个函数openwin()，函数内容就是打开⼀个窗⼝。在调⽤它之前没有任何⽤途。怎么调⽤呢？
//⽅法⼀：<body onload="openwin()"> 浏览器读页⾯时弹出窗⼝；
//⽅法⼆：<body onunload="openwin()"> 浏览器离开页⾯时弹出窗⼝；
//⽅法三：⽤⼀个连接调⽤：
//<a href="#" onclick="openwin()">打开⼀个窗⼝</a>
//注意：使⽤的“#”是虚连接。
//⽅法四：⽤⼀个按钮调⽤：
//<input type="button" onclick="openwin()" value="打开窗⼝">
//4、同时弹出2个窗⼝
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")//写成⼀⾏
}
//为避免弹出的2个窗⼝覆盖，⽤top和left控制⼀下弹出的位置不要相互覆盖即可。最后⽤上⾯说过的四种⽅法调⽤即可。
//注意：2个窗⼝的name(newwindows和newwindow2)不要相同，或者⼲脆全部为空。
//5、主窗⼝打开⽂件1.htm，同时弹出⼩窗⼝page.html
function openwin() {
window.open("page.html", "", "width=200,height=200")
}
//调⽤：<a href="1.htm" onclick="openwin()">open</a>
//6、弹出的窗⼝之定时关闭控制
//下⾯我们再对弹出的窗⼝进⾏⼀些控制，效果就更好了。如果我们再将⼀⼩段代码加⼊弹出的页⾯(注意是加⼊page.html的HTML中，不是主页⾯中)，让它10秒后⾃动关闭是不是更酷了？ //⾸先，将
如下代码加⼊page.html⽂件的<head>区：
function closeit() {
setTimeout("self.close()", 10000) //毫秒
}
//页⾯加载完成调⽤关闭事件
$(document).ready(fucntion(){
closeit();
});
//7、在弹出窗⼝中加上⼀个关闭按钮
//<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
//8、内包含的弹出窗⼝-⼀个页⾯两个窗⼝
/
/上⾯的例⼦都包含两个窗⼝，⼀个是主窗⼝，另⼀个是弹出的⼩窗⼝。通过下⾯的例⼦，你可以在⼀个页⾯内完成上⾯的效果。
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()
}
//<a href="#" onclick="openwin()">打开⼀个窗⼝</a>
//<input type="button" onclick="openwin()" value="打开窗⼝">
//9、终极应⽤--弹出的窗⼝之Cookie控制
//回想⼀下，上⾯的弹出窗⼝虽然酷，但是有⼀点⼩⽑病，⽐如你将上⾯的脚本放在⼀个需要频繁经过的页⾯⾥(例如⾸页)，那么每次刷新这个页⾯，窗⼝都会弹出⼀次，我们使⽤cookie来控制⼀下就可以了。
//⾸先，将如下代码加⼊主页⾯HTML的<HEAD>区：
function openwin() {
window.open("page.html", "", "width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (kie.length > 0) {
offset = kie.indexOf(search)
if (offset != -1) {
offset += search.length
end = kie.indexOf(";", offset);
if (end == -1)
end = kie.length;
returnvalue = kie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup() {
if (get_cookie('popped') == '') {
openwin()
}
}
//然后，⽤<body onload="loadpopup()">（注意不是openwin⽽是loadpop啊！）替换主页⾯中原有的<
BODY>这⼀句即可。你可以试着刷新⼀下这个页⾯或重新进⼊该页⾯，窗⼝再也不会弹出了。真正的Pop-Only-Once！以上这篇js弹出框、对话框、提⽰框、弹窗实现⽅法总结(推荐)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。