用JavaScript实现对话框的教程


Posted in Javascript onJune 04, 2015

 JavaScript支持三种重要类型的对话框。这些对话框可以用来引发和警报,或得到确认的任何输入或有来自用户的一种输入。

在这里,我们将一个一个地来看每个对话框:
Alert 对话框:

一个警告对话框,主要是用来给一个警告信息给用户。就像如果一个输入字段要求输入一些文字,但用户不输入字段则作为验证,可以使用警告框,如下给出警告信息的一部分:

<head>
<script type="text/javascript">
<!--
  alert("Warning Message");
//-->
</script>
</head>

然而,一个警告框仍然可以用于友好的消息。警告框,给人只有一个“Ok”按钮来选择和继续。

 
确认对话框:

一个确认对话框主要用于把用户的同意的任何选项。它显示一个对话框,有两个按钮:确定和取消。

如果用户点击OK按钮,窗口的方法confirm()将返回true。如果用户点击取消按钮confirm() 返回 false。可以使用确认对话框,如下所示:

<head>
<script type="text/javascript">
<!--
  var retVal = confirm("Do you want to continue ?");
  if( retVal == true ){
   alert("User wants to continue!");
  return true;
  }else{
   alert("User does not want to continue!");
  return false;
  }
//-->
</script>
</head>

 
Prompt Dialog Box:

当你想弹出一个文本框来获取用户输入的提示对话框中是非常有用的。因此,它使您能够与用户交互。用户需要填写字段,然后单击确定。

使用对话框 prompt() 是一种方法,它有两个参数(I)要在文本框中显示(Ⅱ)默认字符串文本框中显示的标签显示。

这个对话框有两个按钮:确定和取消。如果用户点击“OK”按钮的窗口法prompt()将从文本框返回输入的值。如果用户点击“取消”按钮窗口方式prompt()返回null。

可以使用提示对话框,如下所示:

<head>
<script type="text/javascript">
<!--
  var retVal = prompt("Enter your name : ", "your name here");
  alert("You have entered : " + retVal );
//-->
</script>
</head>
Javascript 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
three.js实现3D模型展示的示例代码
Dec 31 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 #Javascript
javascript原型模式用法实例详解
Jun 04 #Javascript
使用JavaScript刷新网页的方法
Jun 04 #Javascript
JavaScript中Cookies的相关使用教程
Jun 04 #Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 #Javascript
浅析JavaScript中的事件机制
Jun 04 #Javascript
JavaScript中指定函数名称的相关方法
Jun 04 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
python列表与元组详解实例
2013/11/01 Python
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Linux中如何用命令创建目录
2015/01/12 面试题
设计顾问服务计划书
2014/05/04 职场文书
工作收入住址证明
2014/10/28 职场文书
优秀班主任材料
2014/12/16 职场文书
学习经验交流会策划书
2015/11/02 职场文书
六年级作文之自救
2019/12/19 职场文书