用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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
ES6 Set结构的应用实例分析
Jun 26 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版(5)
2006/10/09 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP循环结构实例讲解
2014/02/10 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python复制文件操作实例详解
2015/11/10 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
详解python读取和输出到txt
2019/03/29 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
法律专业实习鉴定
2013/12/22 职场文书
大一新生学期自我评价
2014/04/09 职场文书
军训拉歌口号
2014/06/13 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
同学聚会感言一句话
2015/07/30 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android