用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 学习初步 入门教程
Mar 25 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
Uploadify上传文件方法
Mar 16 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
用原生js做单页应用
Jan 17 Javascript
vue实现短信验证码输入框
Apr 17 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
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
javascript Object与Function使用
2010/01/11 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
javascript常用函数(1)
2015/11/04 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Vue计算属性的使用
2017/08/04 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python如何求圆的面积
2020/07/01 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
商务英语专业自荐信
2013/10/14 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
党员党性分析材料
2014/02/17 职场文书
学术会议主持词
2014/03/17 职场文书
法人授权委托书
2014/04/03 职场文书
财产公证书
2014/04/10 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Django中session进行权限管理的使用
2021/07/09 Python
Python内置数据类型中的集合详解
2022/03/18 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers