js弹出网页对话框怎么实现?弹出对话框的例子

发布时间:2020-07-25编辑:脚本学堂
本文介绍了js实现弹出网页对话框的方法,通过window.open方法弹出对话框,通过window.showmodaldialog方法弹出对话框,需要的朋友参考下。

使用dhtml,弹出网页对话框的两种方法:
1、通过window.open方法以弹出页面方式实现。
2、通过window.showmodaldialog方法以弹出对话框方式实现。(推荐)

一,通过window.open方法弹出对话框
在写jsp页面时,有时需要点击一个按钮弹出一个输入对话框,然后输入一个值,确定后关闭对话框,把数据写入数据库,刷新当前页面
可以用javascript实现;不过如果用js自带的对话框的话,对话框不美观,不如用一个jsp页面来做对话框。
在页面addname.jsp里要调用对话框,写一个jsp页面newbox.jsp(用做对话框),然后在页面addname.jsp里加上一段js代码:
 

复制代码 代码示例:
/*用来打开对话框页面*/
function openwindow(){ 
   window.open ("newbox.jsp","sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,;);
}
/*在newbox.jsp里调用这个函数,用来刷新addname.jsp*/
function opensub(){
  document.form1.submit();

window.open参数说明:
 

fullscreen=no 窗口模式,yes为全屏模式
 toolbar=no, 显示工具条
location=no,显示网址栏
directories=no,导航条
status=no,状态条
menubar=no,菜单
scrollbars=no,滚动条
resizable=no,是否可以改变大小
copyhistory=no,历史按钮

height=140'高
left=200,距离左边200
top=300,距离顶端300
 

这时要在newbox.jsp里加上一部分js代码,下面是newbox.jsp的代码
 

复制代码 代码示例:
<html>
  <head >
<title>新建邮件夹输入框</title>
<script>
<!--
  function bconfirm(){
 opener.document.all['inboxname'].value=document.form1.inboxname.value;
 opener.opensub();
 window.close();
  }
 function bcancel(){
 window.close();
  }
-->
</script>
</head>  
<body bgcolor=#66cd00>
<font size=5>请输入新邮件夹的名称:</font>
<form method=post name=form1 action="">
<input type=text name=inboxname size=35><p>
<input type=button name=inputboxbt value=确定 onclick="bconfirm();">
<input type=button name=inputboxbs value=取消 onclick="bcancel();">
</form>
</body>
</html>
 

在newbox.jsp里先给addname.jsp里的一个隐藏表单inboxname赋值,就是这句:
opener.document.all['inboxname'].value=document.form1.inboxname.value;
然后调用addname.jsp里的一个js函数:opener.opensub();
这样addname.jsp就会自动提交表单到servlet接着刷新页面,这样就完成了!

二、通过window.showmodaldialog方法弹出对话框。(推荐)
仍然是在页面addname.jsp里要调用对话框,写一个jsp页面newbox.jsp(用做对话框),然后在页面addname.jsp里加上一段js代码:
 

复制代码 代码示例:
/*用来打开对话框页面,注意openwindow()函数中的方法是window.showmodaldialog*/
function openwindow(){ 
   window.showmodaldialog("newbox.jsp",window,"status:no;scroll:no;
dialog;dialogheight:100px");
}
/*在newbox.jsp里调用这个函数,用来刷新addname.jsp*/
function opensub(){
  document.form1.submit();
}
 

对window.showmodaldialog里的参数简单做一下说明:
center : yes | no | 1 | 0 | on | off   指定对话框是否显示于桌面正中。默认值为 yes 。
dialoghide : yes | no| 1 | 0 | on | off   指定当打印或打印预览时对话框是否隐藏。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
edge : sunken | raised   指定对话框窗口边框样式为凹下还是凸起的。默认值为 raised 。
resizable : yes | no | 1 | 0 | on | off    指定对话框是否可以被用户改变尺寸。默认值为 no 。
scroll : yes | no | 1 | 0 | on | off    指定对话框是否显示滚动条。默认值为 yes 。
status : yes | no | 1 | 0 | on | off   指定对话框是否显示状态条。对于不被信任的对话框默认值为 yes 。对于被信任的对话框默认值为 no 。
unadorned : yes | no | 1 | 0 | on | off    指定对话框是否显示 chrome 样式边框。仅仅当对话框是由被信任的程式打开的时候此参数才可用。默认值为 no 。
另外,在newbox.jsp的javascript代码bconfirm()方法中:
 

复制代码 代码示例:
<script>
<!--
  function bconfirm(){
dialogarguments.addnameform.inboxname.value=document.form1.
inboxname.value;
dialogarguments.opensub();
 window.close();
  }
  function bcancel(){
 window.close();
  }
-->
</script>
 

说明:
addnameform为addname.jsp中隐藏表单name,使用window.showmodaldialog方法是要用dialogarguments传递参数。
其他部分不变。