提起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. mapreduce (五) MapReduce实现倒排索引 修改版 combiner是把同一个机器上的多个map的结果先聚合一次

    (总感觉上一篇的实现有问题)http://www.cnblogs.com/i80386/p/3444726.html combiner是把同一个机器上的多个map的结果先聚合一次现重新实现一个: 思路 ...

  2. About javascript language

    Core http://www.cnblogs.com/leoo2sk/archive/2010/12/19/ecmascript-scope.html function(arguments) fun ...

  3. VSTO:无法安装此应用程序,因为已安装具有相同标识的应用程序

    原文:VSTO:无法安装此应用程序,因为已安装具有相同标识的应用程序 在开发环境(Win7+VS2010+Outlook 2010)上做一个Outlook AddIn,运行Outlook时报如下错误: ...

  4. rsync使用说明

    需求:把10.5.128.190数据同步到10.5.128.27 用客服端-服务器模式,需要从客户端发起 也就是从10.5.128.27发起 10.5.128.27 作为客户端 10.5.128.19 ...

  5. 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题

    http://support.huawei.com/ecommunity/bbs/10178271.html?p=1#p0 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题 各 ...

  6. 【转】Android的onCreateOptionsMenu()创建菜单Menu详解

    原文网址:http://www.linuxidc.com/Linux/2012-02/55500.htm Android一共有三种形式的菜单:            1.选项菜单(optinosMen ...

  7. Java---计算机贷款支付额计算(用对话框实现)

    本例演示如何编写程序来计算贷款支付问题. 下面是编写程序的步骤: 1.提示用户输入年利率.年数和贷款总额 2.利用年利率算出月利率 3.通过前面的公式计算月支付额. 4.计算总支付额,它是月支付额乘以 ...

  8. pgAdminIII使用图解

    原文地址:http://www.2cto.com/database/201312/267218.html pgAdmin III简介 要打开一个到服务的连接,在树中选择所需的服务,并双击它,或使用“工 ...

  9. 在javaweb中通过servlet类和普通类读取资源文件

    javaweb有两种方式读取资源文件 在Servlet中读取,可以使用servletContext,servletContext可以拿到web所有的资源文件,然后随便读,但是这种方法不常用,尽量少在S ...

  10. angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post

    1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...