JavaScript实现弹框
提起JS弹框,我首先想到的是Alert,然后想到的还是Alert,最后我竟然就只知道Alert。然后面试就死在这个Alert上了。恼火。
根据网上各位大神的总结,我整理了一下,也顺便学习了一下。
一.仅确定,对话框上面只有一个确认按钮我们用Alert()
代码:
<title>Alert弹出确定框</title>
<script type="text/javascript" language="javascript">
alert("Hello Alex");
alert("Bye!");
</script>
运行效果:

点击确定之后。

总结:
1.JavaScript中。每个Alert都会弹出一个对话框,不覆盖。
2.对话框是由浏览器产生的,JavaScript只是触发。不同的浏览器会显示不同的效果
二,确定和取消两个按钮,我们confirm()
代码:
<title>confirm弹出确认取消按钮</title>
<script type="text/javascript" language="javascript">
var isRes = confirm("Alex你在用confirm实现弹框吗?")
if (isRes)
alert("是的,我正在学习如何用confirm实现确认取消框。");
else
alert("没有阿,我没有用confirm实现弹框呢");
</script>
运行效果:

当我点击确定之后:

当我点击取消之后:

总结:
无论我们点击确定还是取消,弹出框都会关闭,不同的是我们点击确定,confirm()返回true,否则返回false。
三,界面显示文本框,用户可输入,用prompt()
代码:
<title>prompt弹出输入框</title>
<script type="text/javascript" language="javascript">
var name = prompt("请输入您的名字:", "");
alert(name);
</script>
运行效果:

点击确定按钮

点击取消按钮

总结:prompt函数有两个参数,第一个参数是要显示消息对话框中的文本,不可修改。第二个参数是文本框中的内容,可以修改。
JavaScript实现弹框的更多相关文章
- javascript的弹框
学习js最先了解到的两种种简单测试手段就是alert("blah");和console.log("blah");了. 除了alert之外,js还有两种弹框 co ...
- JavaScript 图片弹框显示
function fnCreate(src) { /* 要创建的div的classname */ var ClassName = "thumb ...
- Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框
<html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...
- javascript flash 弹框
1. [代码]FlashBox // JavaScript Documentfunction FlashBox(src,width,height){var docbody = document ...
- javascript中的弹框
大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...
- JavaScript插件——弹出框
(JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...
- javascript只弹出一次框 再次刷新不弹出
.打开页面自动弹出 当关闭弹框的时候 设置cookie生存时间 再次刷新页面判断cookie是否失效 <html> <head> <meta charset=&qu ...
- JavaScript实现自定义alert弹框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO
- 操作JavaScript的Alert弹框
@Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...
随机推荐
- 转:基于ASP.NET的Comet长连接技术解析
原文来自于: Comet技术原理 来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流. 简单的 ...
- 【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)
2.1 为iOS设计(Design for iOS) iOS体现以下主题: 遵从:UI帮助用户理解界面内容并与内容交互,但绝不会与内容相互冲突. 清晰:文本在任何尺寸下都是清晰易读,图标精确易懂,装饰 ...
- Whitespace character
In computer science, whitespace is any character or series of whitespace characters that represent h ...
- [BZOJ 3110] [Zjoi2013] K大数查询 【树套树】
题目链接: BZOJ - 3110 题目分析 这道题是一道树套树的典型题目,我们使用线段树套线段树,一层是区间线段树,一层是权值线段树.一般的思路是外层用区间线段树,内层用权值线段树,但是这样貌似会很 ...
- 要开始深入VMM了。
得到一个VMM机器所有的节点状态 Quick one-liner to generate a CSV of virtual machines, sorted by their hosts. Repor ...
- 可重入与线程安全(大多数Qt类是可重入,非线程安全的)
可重入与线程安全 在Qt文档中,术语“可重入”与“线程安全”被用来说明一个函数如何用于多线程程序.假如一个类的任何函数在此类的多个不同的实例上,可以被多个线程同时调用,那么这个类被称为是“可重入”的. ...
- -_-#【JS】isFinite
/** * isFinite(number) * 检查是否是无穷大 * 如果 number 是有限数字(或可转换为有限数字),那么返回 true * 如果 number 是 NaN(非数字),或者是正 ...
- 2015第40周二Node学习
node历史 今天看cnode开源项目用了io.js,在查这个项目时发现这篇文章node历史,node.js和io.js关系谈到Node.js的由来,不可避免要聊到它的创始人Ryan Dahl.在20 ...
- 数学计数原理(Pólya,高精度):SGU 294 He's Circles
He's Circles He wrote n letters "X" and "E" in a circle. He thought that there ...
- Java 内省 Introspector
操纵类的属性,有两种方法 反射 内省 面向对象的编程中,对于用户提交过来的数据,要封装成一个javaBean,也就是对象 其中Bean的属性不是由字段来决定的,而是由get和Set方法来决定的 pub ...