用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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
深入分析javascript中console命令
Aug 14 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
用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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
浅谈python中set使用
2016/06/30 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Django 路由控制的实现
2019/07/17 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
Hibernate持久层技术
2013/12/16 面试题
会计专业自我鉴定范文
2013/12/29 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
航空学院求职信
2014/06/11 职场文书
公司离职证明标准格式
2014/11/18 职场文书
工作检讨书怎么写
2015/01/23 职场文书
股份转让协议书范本
2015/01/27 职场文书
音乐会主持人开场白
2015/05/28 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书