用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 面向对象编程基础:继承
Aug 21 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
解决vue中provide inject的响应式监听
Apr 19 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
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
webpack external模块的具体使用
2018/03/10 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
python选择排序算法实例总结
2015/07/01 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
茶叶店创业计划书范文
2014/01/19 职场文书
运动会入场词50字
2014/02/20 职场文书
个人求职自荐信范文
2014/06/20 职场文书
志愿者活动总结报告
2014/06/27 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
计划生育责任书
2015/05/09 职场文书
Python集合的基础操作
2021/11/01 Python