弹出全屏显示的网页模式对话框

最新推荐文章于 2022-07-26 21:58:06 发布

blblbl616

最新推荐文章于 2022-07-26 21:58:06 发布

阅读量748

点赞数 1

文章标签： class Class css CSS Css javascript JavaScript Javascript javaScript

这个实例主要应用screen对像的width、height属性和window对象的showModeaDialog()方法实现。

首先创建一个对话框页面hh12.html，在index.html主页中创建”打开对话框”超级链接。
<a href=”#” onClick=”opendialog()”>打开对知框</a>
编写自定义的JavaScript函数opendialog(),用于打开全屏显示的网页对话框，程序代码如下：

function opendialog(){
       var width=screen.width;
       var height=screen.height;
       window.showModalDialog("hh12.html","","dialogWidth="+width+"px;dialogHeight="+height+";status=no;scrollbars=no")
       }

然后是创建hh12.html页面的内容：

<script type="text/javascript">
function mycheck(myform){
       if(myform.Manager.value==""){
              alert("请输入管理员！");myform.Manager.focus();return;
              }
              if(myform.PWD.value==""){
                     alert("请输入密码！");myform.PWD.focus();return;
                     }
                     myform.submit();
       }
</script>
</head>

<body style="width:100%;">
<form method="post" action="" name="myform">
<table width="100%" border="0" cellspacing="-2" cellpadding="-2">
<tr>
<td width="20" height="65"> </td>
<td width="82"> </td>
<td width="200"> </td>
<td width="20" > </td>
</tr>
<tr>
<td height="34"> </td>
<td align="center" class="word">  管理员：</td>
<td>
<input name="Manager" type="text" class="txt_grey" id="Manager3" οnkeydοwn="if(event.keyCode==13)myform.PPWD.focus();" maxlength="20">
</td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td align="center" class="word">  密  码：</td>
<td>
<input name="PWD" type="password" class="txt_grey" id="PWD" οnkeydοwn="if(event.keycode==13)mycheck(myform)" maxlength="20">
</td>
<td> </td>
</tr>
</table>
</form>

此时的效果就是你打开对话框后，必需关闭对话框才能浏览网页。这个方法可以实现弹出的网站后台管理员登录窗口，还可以实现当用户执行非法操作后，弹出一个大大的警告框。
文章来源： http://www.cssyoo.com/a/jstexiao/20121209/js_26.html