js弹出对话框(消息框、警告框)

www.111cn.net 更新:2013-11-21 编辑:restart 来源:转载
js弹出对话框包括有confirm,alert,prompt,window.open等等下面我来给大家整理这些弹出对话框的一些应用实例,希望对各位同学会有所胡。

 

警告(alert)

在访问网站的时候,你遇到过这样的情况吗?“咚”的一声,一个小窗口出现在你面前,上面写着一段警示性的文字,或是其它的提示信息。如果你不点击确定,你就不能对网页做任何的操作。没错,这个“咚”的小窗口就是alert干的。

下面的代码是一段使用alert的实例。

 代码如下 复制代码
<script type="text/JavaScript">
     alert("我是菜鸟我怕谁");
</script>

我的个人观点是尽量少使用alert,它很不友好。甚至可能让一些方可认为你的网站很危险。

看一个使用alert的实例

确认(confirm)

确认框用于让用户选择某一个问题是否符合实际情况。

“说!是还是不是?快回答!”

如果你想表达这样的意思,那么confirm再合适不过了。来看下面的代码:我们用confirm("你是菜鸟吗?")向访客提问,变量r则保存了访客的回应,它只可能有两种取值:true或false。没错,它是一个布尔值。confirm后面的语句则是我们对访客回答做出的不同回应。

 代码如下 复制代码
<script type="text/JavaScript">
     var r=confirm("你是菜鸟吗");
     if (r==true)
     {
     document.write("彼此彼此");
     }
     else
     {
     document.write("佩服佩服");
     }</script>

看一个使用confirm的实例

提问(prompt)


prompt和confirm类似,不过它允许访客随意输入回答。我们来修改一下之前switch的例子,我们根据分数来做出不同的评价,不过那段程序并不完整,它根本就没问我们分数,而是假设我得了65分。这太不公平了。现在我么就可以用prompt来向访客提问,用score存储用户输入的回答,其余的事情就都由后面的switch来完成了。

 代码如下 复制代码

<script type="text/JavaScript">
 function judge() {
 var score;//分数
 var degree;//分数等级
 score = prompt("你的分数是多少?")
 if (score > 100){
 degree = '耍我?100分满!';
 }
 else{
 switch (parseInt(score / 10)) {
 case 0:
 case 1:
 case 2:
 case 3:
 case 4:
 case 5:
 degree = "恭喜你,又挂了!";
 break;
 case 6:
 degree = "勉强及格";
 break;
 case 7:
 degree = "凑合,凑合"
 break;
 case 8:
 degree = "8错,8错";
 break;
 case 9:
 case 10:
 degree = "高手高手,佩服佩服";
 }//end of switch
 }//end of else
 alert(degree);
 }
 </script>


看一个完带的实例

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>三种弹出对话框的用法实例</title>

<script language="javascript">

function ale()

{

  //这个基本没有什么说的,就是弹出一个提醒的对话框

    alert("我敢保证,你现在用的是演示一");

}

function firm()

{

  //利用对话框返回的值 (true 或者 false)

    if(confirm("你确信要转去风亦飞的博客?"))

    {

      //如果是true ,那么就把页面转向thcjp.cnblogs.com

        location.href="http://blog.111cn.net/fengyifei11228/";

     }

    else

    {

     //否则说明下了,赫赫

      alert("你按了取消,那就是返回false");

    }

}

function prom()

{

    var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ,

    //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值

    if(name)//如果返回的有内容

    {

         alert("欢迎您:"+ name)

     }

}

</script>

</head>

 

<body>

<p>对话框有三种</p>

<p>1:只是提醒,不能对脚本产生任何改变;</p>

<p>2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 ifelse判断 </p>

<p>3: 一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p>

<p>下面我们分别演示:</p>

<p>演示一:提醒 对话框</p>

<p>

  <input type="submit" name="Submit" value="提交" onclick="ale()" />

</p>

<p>演示二 :确认对话框 </p>

<p>

  <input type="submit" name="Submit2" value="提交" onclick="firm()" />

</p>

<p>演示三 :要求用户输入,然后给个结果</p>

<p>

  <input type="submit" name="Submit3" value="提交" onclick="prom()" />

</p>

</body>

</html>

最后就是window.open()弹出窗口对话框了

1、最基本的js弹出对话框窗口代码】

这是最基本的js弹出对话框,其实代码就几句非常简单:

 

 代码如下 复制代码

<script LANGUAGE="javascript">
<!--
window.open ("page.html")
-->
</script>


因为这是一段javascripts代码,所以它们应该放在<script LANGUAGE="javascript">标签和</script>之间。<!-- 和-->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

window.open ("page.html") 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长的页面,这种js弹出对话框想早点弹出就尽量往前放。


【2、增加属性设置的js弹出对话框代码】

下面再说一说js弹出对话框窗口属性的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个js弹出对话框弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。

 

 

 代码如下 复制代码
<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=no,status=no")
//写成一行
-->
</script>

参数解释:
<script LANGUAGE="javascript"> 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、用函数控制js弹出对话框窗口】

下面是一个完整js弹出对话框的代码。

 

 

 代码如下 复制代码

<html>
<head>
<script LANGUAGE="javascript">
<!--
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 onload="openwin()">
...任意的页面内容...
</body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

怎么调用呢?

方法一:浏览器读页面时弹出窗口;

 代码如下 复制代码

 

<body onload="openwin()">

方法二:浏览器离开页面时弹出窗口;

 

 代码如下 复制代码

<body onunload="openwin()">

方法三:用一个连接调用:

 

 代码如下 复制代码

<a href="#" onclick="openwin()">打开一个窗口</a>


注意:使用的“#”是虚连接。

方法四:用一个按钮调用:

 

 代码如下 复制代码

<input type="button" onclick="openwin()" value="打开窗口">


【4、同时弹出2个窗口的js弹出对话框】

对源代码稍微改动一下:

 

 

 代码如下 复制代码

<script LANGUAGE="javascript">
<!--
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个js弹出对话框窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。