用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下利用jsonp跨域访问实现方法
Jul 29 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
input框中的name和id的区别
Nov 16 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 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
第五节--克隆
2006/11/16 PHP
php构造函数实例讲解
2013/11/13 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
angular 组件通信的几种实现方式
2018/07/13 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python实现端口复用实例代码
2014/07/03 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
python如何绘制疫情图
2020/09/16 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
初中语文教学反思
2014/02/02 职场文书
教师党员承诺书
2014/03/25 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
监考失职检讨书
2015/01/26 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
初中班主任教育随笔
2015/08/15 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Go获取两个时区的时间差
2022/04/20 Golang