用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 相关文章推荐
用javascript操作xml
Nov 04 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python使用scrapy解析js示例
2014/01/23 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
大专会计自我鉴定
2014/02/06 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
日元符号 ¥
2022/02/17 杂记