用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+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 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
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
浅谈MySQL中的触发器
2015/05/05 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python字符串string的内置方法实例详解
2018/05/14 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python是否适合网页编程详解
2019/10/04 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
C和C++经典笔试题附答案解析
2014/08/18 面试题
会计电算化个人自我评价
2013/11/17 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
端午节演讲稿
2014/05/23 职场文书
用电申请报告范文
2015/05/18 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
Java对文件的读写操作方法
2022/04/29 Java/Android