用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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
jquery radio 操作代码
Mar 16 Javascript
js中switch case循环实例代码
Dec 30 Javascript
编程语言JavaScript简介
Oct 16 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php 类自动载入的方法
2015/06/03 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
用jscript实现新建word文档
2007/06/15 Javascript
奇妙的js
2007/09/24 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
详解vue组件基础
2018/05/04 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
药学专业个人自我评价
2013/11/11 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
python之基数排序的实现
2021/07/26 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android