JavaScript 有三种类型的弹出框:警告框、确认框和提示框。

警告框

如果要确保信息传递给用户,通常会使用警告框。

当警告框弹出时,用户将需要单击“确定”来继续。

语法

window.alert("sometext");

window.alert() 方法可以不带 window 前缀来写。

实例

alert("我是一个警告框!");

完整实例

<!DOCTYPE html>
<html>
<body> <h1>JavaScript 警告框</h1> <button onclick="myFunction()">试一试</button> <script>
function myFunction() {
alert("我是一个警告框!");
}
</script> </body>
</html>

确认框

如果您希望用户验证或接受某个东西,则通常使用“确认”框。

当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带 window 前缀来编写。

实例

var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}

完整实例

<!DOCTYPE html>
<html>
<body> <h1>JavaScript 确认框</h1> <button onclick="myFunction()">试一试</button> <p id="demo"></p> <script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "您按了确定";
} else {
txt = "您按了取消";
}
document.getElementById("demo").innerHTML = txt;
}
</script> </body>
</html>

提示框

如果您希望用户在进入页面前输入值,通常会使用提示框。

当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。

语法

window.prompt("sometext","defaultText");

window.prompt() 方法可以不带 window 前缀来编写。

实例

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "!今天过的怎么样?";
}

完整实例

<!DOCTYPE html>
<html>
<body> <h1>JavaScript Prompt</h1> <button onclick="myFunction()">试一试</button> <p id="demo"></p> <script>
function myFunction() {
var txt;
var person = prompt("请输入您的名字:", "哈利波特");
if (person == null || person == "") {
txt = "用户取消输入";
} else {
txt = "你好," + person + "!今天过得好吗?";
}
document.getElementById("demo").innerHTML = txt;
}
</script> </body>
</html>

折行

如需在弹出框中显示折行,请在反斜杠后面加一个字符 n。

实例

alert("Hello\nHow are you?");

完整实例

<!DOCTYPE html>
<html>
<body> <h1>JavaScript</h1> <p>在警告框中换行。</p> <button onclick="alert('Hello\nHow are you?')">试一试</button> </body>
</html>

  

JavaScript 弹出框的更多相关文章

  1. 练习:javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript弹出框打印某个数值时,弹出NaN?(not a number)

    一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...

  3. JavaScript弹出框

    confirm(str); 参数说明: str:在消息对话框中要显示的文本 返回值: Boolean值 返回值: 当用户点击"确定"按钮时,返回true 当用户点击"取消 ...

  4. JavaScript 弹出框:警告(alert)、确认(confirm)的简单写法

    onclick="javascript:return window.confirm('message')"

  5. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  6. 转:WebDriver(Selenium2) 处理可能存在的JS弹出框

    在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...

  7. WebDriver(Selenium2) 处理可能存在的JS弹出框

    http://uniquepig.iteye.com/blog/1703103 在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然 ...

  8. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  9. JavaScript插件——弹出框

    (JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...

随机推荐

  1. 深度学习accuracy

    accuracy=(1+3)/(1+2+3+4),即在所有样本(例子)中做出正确预测的的比例,或者说正确预测的样本数占总预测样本数的比值. precision=(1)/(1+2),指的是正确预测的正样 ...

  2. 在centos8搭建dhcp服务

    1.用这两个命令就可以安装成功 yum - y install dhcp yum -y install dhcp-server.x86_64 2.配置文件在 /etc/dhcp/dhcpd.conf ...

  3. 【oracle】merge into 函数

  4. 使用jQuery的replaceWith()方法要注意的地方

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. requests--文件上传,文件下载

    文件上传 在做接口自动化的时候,有时需要上传文件,比如更改头像等等,在request里,通过files参数来上传 import requests base_url = 'http://httpbin. ...

  6. 【day06】css

    一.背景(Background) 1. background-color 背景颜色 2. background-image:url(图像URL);背景图片 3. background-repeat: ...

  7. Linux性能优化实战学习笔记:第五十一讲

    一.上节回顾 上一节,我带你一起学习了常见的动态追踪方法.所谓动态追踪,就是在系统或者应用程序正常运行的时候,通过内核中提供的探针,来动态追踪它们的行为,从而辅助排查出性能问题的瓶颈. 使用动态追踪, ...

  8. DVWA XSS (DOM) 通关教程

    DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容.结构以及样式. DOM型XSS其实是一种特殊类型的反射型XSS,它是 ...

  9. SQLAIchemy 学习(一)Session 相关

    0. 前言 最近是使用 SQLAlchemy 框架作为一个 ORM 框架,现对其做简单整理 1. 创建 Session 说到数据库,就离不开 Session.Session 的主要目的是建立与数据库的 ...

  10. 启动apache,将debug日志输出在console窗口

    sudo apachectl -k start -e DEBUG 点个广告吧亲: