您的位置：首页 > 其它

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

2012-12-10 08:58 666 查看

这个实例主要应用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" onkeydown="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" onkeydown="if(event.keycode==13)mycheck(myform)" maxlength="20">

</td>

<td> </td>

</tr>

</table>

</form>

此时的效果就是你打开对话框后，必需关闭对话框才能浏览网页。这个方法可以实现弹出的网站后台管理员登录窗口，还可以实现当用户执行非法操作后，弹出一个大大的警告框。

文章来源：http://www.cssyoo.com/a/jstexiao/20121209/js_26.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航