用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中arguments对象详解
Oct 22 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
webpack实用小功能介绍
Jan 02 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PDO::prepare讲解
2019/01/29 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
JAVASCRIPT对象及属性
2007/02/13 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Django REST framework视图的用法
2019/01/16 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
年终晚会活动方案
2014/08/21 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
交通安全横幅标语
2014/10/07 职场文书
普通党员个人整改措施
2014/10/27 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python