js 弹出对话框3种方式

对话框有三种

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

2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断

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

下面我们分别演示:

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5. <head>  
  6.   
  7. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  8.   
  9. <title>三种弹出对话框的用法实例</title>  
  10.   
  11. <script language="javascript">  
  12.   
  13. function ale()  
  14.   
  15. {  
  16.   
  17.         //这个基本没有什么说的,就是弹出一个提醒的对话框  
  18.   
  19.     alert("我敢保证,你现在用的是演示一");  
  20.   
  21. }  
  22.   
  23. function firm()  
  24.   
  25. {  
  26.   
  27.         //利用对话框返回的值 (true 或者 false)  
  28.   
  29.     if(confirm("你确信要转去风亦飞的博客?"))  
  30.   
  31.     {  
  32.   
  33.             //如果是true ,那么就把页面转向thcjp.cnblogs.com  
  34.   
  35.         location.href="http://blog.csdn.net/fengyifei11228/";  
  36.   
  37.      }  
  38.   
  39.     else  
  40.   
  41.     {  
  42.   
  43.         //否则说明下了,赫赫  
  44.   
  45.       alert("你按了取消,那就是返回false");  
  46.   
  47.     }  
  48.   
  49. }  
  50.   
  51. function prom()  
  52.   
  53. {  
  54.   
  55.     var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ,  
  56.   
  57.     //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值  
  58.   
  59.     if(name)//如果返回的有内容  
  60.   
  61.     {  
  62.   
  63.          alert("欢迎您:"+ name)  
  64.   
  65.      }  
  66.   
  67. }  
  68.   
  69. </script>  
  70.   
  71. </head>  
  72.   
  73.   
  74.   
  75. <body>  
  76.   
  77. <p>对话框有三种</p>  
  78.   
  79. <p>1:只是提醒,不能对脚本产生任何改变;</p>  
  80.   
  81. <p>2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 ifelse判断 </p>  
  82.   
  83. <p>3: 一个带输入的对话框,可以返回用户填入的字符串,常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p>  
  84.   
  85. <p>下面我们分别演示:</p>  
  86.   
  87. <p>演示一:提醒 对话框</p>  
  88.   
  89. <p>  
  90.   
  91.   <input type="submit" name="Submit" value="提交" onclick="ale()" />  
  92.   
  93. </p>  
  94.   
  95. <p>演示二 :确认对话框 </p>  
  96.   
  97. <p>  
  98.   
  99.   <input type="submit" name="Submit2" value="提交" onclick="firm()" />  
  100.   
  101. </p>  
  102.   
  103. <p>演示三 :要求用户输入,然后给个结果</p>  
  104.   
  105. <p>  
  106.   
  107.   <input type="submit" name="Submit3" value="提交" onclick="prom()" />  
 

你可能感兴趣的:(对话框)