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" ...
随机推荐
- hadoop 生态系统版本对应问题
http://hbase.apache.org/book.html 这是hortonworks的哦哦哦哦哦哦哦哦哦哦哦哦 Hadoop 2.x is better than Hadoop 1.x Ha ...
- ARM单片机的头文件如何用结构体定义地址
下面我们以ARM Cortex-M0内核单片机LPC1114的头文件lpc11xx.h文件进行说明. 1.先说两句 lpc11xx.h文件是lpc11xx系列单片机包含的头文件.这个文件的作用和51单 ...
- Hibernate 配置详解(3)
7) hibernate.max_fetch_depth: 该属性用于设置left out join单对象查询关系(one-to-one/many-to-one)中最大的关联深度.默认值为0,即默认情 ...
- 【HDOJ】2333 Assemble
二分+贪心策略.其中注释处很重要. #include <iostream> #include <cstdio> #include <cstring> #includ ...
- -_-#【工具】图片导出PDF
- FZYZOJ-1880 【UFO】水管
P1880 -- [ufo]水管 时间限制:1000MS 内存限制:131072KB 通过/提交人数:32/100 状态: 标签: 数学问题-组合数学 无 ...
- Entity Framwork db First 中 Model验证解决办法。
由于项目中用到 Entity Framwork db First 每次从数据库生成数据模型之后都会把模型更新. 只要有一个表更新.所有的类都会重新生成. 在网上找了各种例子都是差不多的, 可能 ...
- python 解析 配置文件
资料: https://docs.python.org/3/library/configparser.html 环境 python 3.4.4 RawConfigParser方式 example.cf ...
- Theano 在windows下安装
Theano + win8 一切为了 Deep Learning 选择安装方式:AnacondaCE 学术免费 Simply download and execute the installer f ...
- Redis的安装及配置
Redis安装及主从配置 一.何为Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表) ...