用JavaScript实现对话框的教程

   这篇文章主要介绍了用JavaScript实现对话框的教程,是JS入门学习中的基础知识,需要的朋友可以参考下

  JavaScript支持三种重要类型的对话框。这些对话框可以用来引发和警报,或得到确认的任何输入或有来自用户的一种输入。

  在这里,我们将一个一个地来看每个对话框:

  Alert 对话框:

  一个警告对话框,主要是用来给一个警告信息给用户。就像如果一个输入字段要求输入一些文字,但用户不输入字段则作为验证,可以使用警告框,如下给出警告信息的一部分:

  ?

1
2
3
4
5
6
7

<head>
<script type="text/javascript">
<!--
alert("Warning Message");
//-->
</script>
</head>

  然而,一个警告框仍然可以用于友好的消息。警告框,给人只有一个“Ok”按钮来选择和继续。

  确认对话框:

  一个确认对话框主要用于把用户的同意的任何选项。它显示一个对话框,有两个按钮:确定和取消。

  如果用户点击OK按钮,窗口的方法confirm()将返回true。如果用户点击取消按钮confirm() 返回 false。可以使用确认对话框,如下所示:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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。

  可以使用提示对话框,如下所示:

  ?

1
2
3
4
5
6
7
8

<head>
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
//-->
</script>
</head>

时间: 2024-09-27 21:29:22

用JavaScript实现对话框的教程的相关文章

用JavaScript实现对话框的教程_基础知识

 JavaScript支持三种重要类型的对话框.这些对话框可以用来引发和警报,或得到确认的任何输入或有来自用户的一种输入. 在这里,我们将一个一个地来看每个对话框:Alert 对话框: 一个警告对话框,主要是用来给一个警告信息给用户.就像如果一个输入字段要求输入一些文字,但用户不输入字段则作为验证,可以使用警告框,如下给出警告信息的一部分: <head> <script type="text/javascript"> <!-- alert("Wa

超赞的动手创建JavaScript框架的详细教程

  这篇文章主要介绍了动手创建JavaScript框架的详细教程,包括DOM和各种属性的调试等各个方面,超级推荐!需要的朋友可以参考下 觉得Mootools不可思议?想知道Dojo是如何实现的?对JQuery的技巧感到好奇?在这篇教程里,我们将探寻框架背后的秘密,然后试着自己动手建立一个你所喜爱的框架的简易版本. 我们几乎每天都在使用各种各样的JavaScript框架.当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒.这是因为:首先,对于新手来说DOM太难理

JavaScript Switch 入门实例教程

JavaScript Switch 入门实例教程 有条件的声明在JavaScript被用来执行不同的行动,根据不同的条件. 范例switch语句 如何撰写switch语句. <html> <body> <script type="text/javascript"> var d = new Date(); theDay=d.getDay(); switch (theDay) { case 5:   document.write("<b&

分享16个javascript&amp;jQuery的MVC教程

日期:2011/12/19  来源:GBin1.com 2011即将过去我们将在几周后迎来新的一年. 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢! jQuery MVC 1. AJAX - Spring MVC 3和jQuery的整合 这个教程中我们将使用jQuery的AJAX机制开发一个简单的Spring MVC3应用.我们将介绍如何使用jQuery.post()方法来处理post数据 2. Progressive Enhancement Techniques 如果你开发

Eclipse配置Javascript开发环境图文教程_jquery

首先需要安装Spket.这里就不细讲了. 之后进行JQuery的配置: 1. 从JQuery.com下载开发用的Javascript文件,如下图,一定要选择红框里面的选项. 2. 配置Eclipse里面的Spket Javascript Profiles,如下图: 1) 从window->Preferences...进去 2) 如上图选择Spket -> Javascript Profiles 3) 点击New...输入JQuery建立新的profile 4) 点击Add Library,并选

javascript的对话框详解与参数_基础知识

对话框可以分为模式对话框和无模式对话框两种,两者区别是在对话框被关闭之前用户能否在同一应用程序的其他地方进行工作.举例说明:打开文件对话框便是典型的模式对话框,在你选择好要打开的文件按下确定后,或者取消打开文件操作后,才可以在同一应用程序进行其他操作.而常见的查找和替换对话框便是无模式对话框的典型,在该对话框打开的同时,我们还可以进行其他工作.模式对话框会始终保持焦点.除非关闭对话框,否则无法切换窗口. 无模式对话框不会始终保持焦点,但始终保持显示在最前端. 弹出网页窗口全攻略(html/hta

ModelDialog JavaScript模态对话框类代码_javascript技巧

/** * JavaScript ModelDialog v0.1 * * new ModelDialog({ * caption 标题 '对话框标题'(默认) * template 主体内容 ''(默认) * dialogCls 对话框className 'md-dialog'(默认) * headCls 头部className 'md-head'(默认) * btnCloseCls 关闭按钮className 'md-close'(默认) * bodyCls 主体className 'md-

超赞的动手创建JavaScript框架的详细教程_javascript技巧

 觉得Mootools不可思议?想知道Dojo是如何实现的?对JQuery的技巧感到好奇?在这篇教程里,我们将探寻框架背后的秘密,然后试着自己动手建立一个你所喜爱的框架的简易版本. 我们几乎每天都在使用各种各样的JavaScript框架.当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒.这是因为:首先,对于新手来说DOM太难理解了:当然,对于一个API来说难以理解可不是什么好事.其次,浏览器间的兼容性问题非常令人困扰.     我们将元素包装成对象是因为我们

javascript split函数实例教程

 javascript教程 split函数实例教程 <html> <head> <script> function foo() { var str = reverse('a,b,c,d,e,f,g'); alert(str); if (str == 'g,f,e,d,c,b,a') alert('成功'); else alert('失败'); } function reverse(str) { // 在此处加入代码,完成字符串翻转功能 var spl = str.spl