用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 事件处理函数间的Event物件是否全等
Apr 08 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
vue实现信息管理系统
May 30 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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使用者状态管理功能的应用
2006/10/09 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
vue全屏事件开发详解
2020/06/17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
分分钟入门python语言
2018/03/20 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python循环实现n的全排列功能
2019/09/16 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
navabi英国:设计师大码女装
2019/06/25 全球购物
演讲稿格式
2014/04/30 职场文书
艺术教育实施方案
2014/05/03 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书