用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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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解析URL函数parse_url和parse_str
2014/11/11 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python实现月食效果实例代码
2019/06/18 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python实现感知机模型的示例
2020/09/30 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
个人简历中自我评价
2014/02/11 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
教师一帮一活动总结
2014/07/08 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书