提起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. org.springframework.web.context.ContextLoaderListener

    ContextLoaderListener的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在web ...

  2. php socket 通信

    Socket扩展是基于流行的BSD sockets,实现了和socket通讯功能的底层接口,它可以和客户端一样当做一个socket服务器. 想了解更通用的客户端socket接口,请看 stream_s ...

  3. 根据div 标签 查看数组@class=modulwrap 下面的/table/tbody/tr/td

    <div class="modulwrap"> <div class="request_title"> <span class=& ...

  4. 【最大流】ECNA 2015 F Transportation Delegation (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: N(N<=600)个点,每个点有个名字Si,R(R<=200)个生产商在R个点上,F(F<= ...

  5. 【转】C/C++ 内存对齐

    [转自]http://wenku.baidu.com/view/8eaaa26925c52cc58bd6bed2.htmlC/C++内存对齐 一.什么是字节对齐,为什么要对齐? 现代计算机中内存空间都 ...

  6. String Problem - HDU 3374 (kmp+最大最小表示)

    题目大意:有一个字符串长度为N的字符串,这个字符串可以扩展出N个字符串,并且按照顺序编号,比如串  ” SKYLONG “ SKYLONG 1 KYLONGS 2 YLONGSK 3 LONGSKY ...

  7. 阿里IPO弃港赴美?

    最近,关于阿里巴巴和香港联交所博弈的新闻一直长时间占据了各大科技媒体的头条.9月25日,香港联交所行政总裁在港交所其个人专栏“小加网志”中贴出一则名为<投资者保障杂谈>的博客文章,谈及“香 ...

  8. Node.js学习(7)----包

    包是在模块的基础上更深一步的抽象,Node.js的包类似于C/C++函数库或者Java/.NET的类库.它将独立的功能封装起来用于发布.更新.依赖管理和版本控制. Node.js的包是一个目录,其中包 ...

  9. 多台计算机之间的ssh无密钥登录

    在很多分布式系统中,我们最常遇到的一个问题是,需要在服务器集群上保证多台机器之间的SSH无密钥登录.以Hadoop为例,为了方便,我们需要在master和slaves之间配置密钥登录,这样我们启动Ha ...

  10. Struts2学习笔记(三):result配置的各项视图转发类型

    Struts 1: <action path="/user" type="org.sunny.user.action.UserAction" ...> ...