提起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实现弹框的更多相关文章

  1. javascript的弹框

    学习js最先了解到的两种种简单测试手段就是alert("blah");和console.log("blah");了. 除了alert之外,js还有两种弹框 co ...

  2. JavaScript 图片弹框显示

    function fnCreate(src) {             /* 要创建的div的classname */             var ClassName = "thumb ...

  3. Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框

    <html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...

  4. javascript flash 弹框

    1. [代码]FlashBox     // JavaScript Documentfunction FlashBox(src,width,height){var docbody = document ...

  5. javascript中的弹框

    大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...

  6. JavaScript插件——弹出框

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

  7. javascript只弹出一次框 再次刷新不弹出

    .打开页面自动弹出  当关闭弹框的时候  设置cookie生存时间  再次刷新页面判断cookie是否失效 <html> <head> <meta charset=&qu ...

  8. JavaScript实现自定义alert弹框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO

  9. 操作JavaScript的Alert弹框

    @Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...

随机推荐

  1. A Statistical View of Deep Learning (IV): Recurrent Nets and Dynamical Systems

    A Statistical View of Deep Learning (IV): Recurrent Nets and Dynamical Systems Recurrent neural netw ...

  2. 6月A项目的总结

    对JS效果的要求有几点: 1.顶部导航栏鼠标经过动画. 2.Slider轮播图带有左右箭头,底部有缩略图,缩略图和大图都会自动播放. 3.右侧有个三个按钮的导航菜单,第一个按钮回到整个页面顶部,第二个 ...

  3. 检查网口流量与前10名流量大IP

    此脚本包含的功能有: 1.实时监控任意网卡的流量 2.统计10秒内平均流量 3.统计每个端口在10秒内的平均流量,基于客户端和服务端端口统计.可以看出哪些端口占流量比较大,对于web服务器,一般是80 ...

  4. UIPickerView 地区解析 -- 全国省、市、区 plist 解析 -- 读取UIPickerView 当前显示内容

    一个简单的plist 解析过程,借助UIPickerView 实现了手选全国的 省市区 方法, 源码中有详细注释:长句自己可以拆开看,最好的方法是,拆开,并打印,查看每一步打印的结果,结合Plist文 ...

  5. linux dd命令参数及用法详解---用指定大小的块拷贝一个文件(也可整盘备份)

    linux dd命令参数及用法详解---用指定大小的块拷贝一个文件 日期:2010-06-14 点击:3830 来源: 未知 分享至:            linux dd命令使用详解 dd 的主要 ...

  6. 五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O

    五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O 五种I/O 模式:[1]        阻塞 I/O          ...

  7. 怒刷BZOJ记录(一)1001~1037

    我实在是太弱了...不滚粗只能刷BZOJ了...这里来记录每天刷了什么题吧. 2015-7-9 : 1001[BeiJing2006]狼抓兔子                 | 最大流练习(呃..其 ...

  8. SendMessage API

    using System; using System.IO; using System.Threading; using System.Diagnostics; using System.Runtim ...

  9. CodeForces 593A

    题目链接: http://codeforces.com/problemset/problem/593/A 题意: 给你n个字符串,字符串只包含小写字母,从中选取任意个字符串,拼成一封信,这封信中至多有 ...

  10. python编译环境发掘——从IDLE到sublime到pycharm到Anaconda

    一个好的编译器对于我们处理日常的科研很关键,好的编译器无论是从界面,字体风格,提示,调试等各方面都能从用户角度出发,提供最好的使用体验.Python本身自带的IDLE或者在CMD里进行操作和调试,对于 ...