点击按钮后，弹出层对话框，可交互，点击关闭后才关闭掉对话框。

效果图：

源码：

<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>My Test Document</title>

 <style>

 .box{

     width:50%; margin-top:10%; margin:auto; padding:28px;

     height:350px; border:1px #111 solid;

     display:none;            /* 默认对话框隐藏 */

 }

 .box.show{display:block;}

 .box .x{ font-size:18px; text-align:right; display:block;}

 .box input{width:80%; font-size:18px; margin-top:18px;}

 </style>

 </head>

 <body>

     <!-- 如果你的对话框 不仅是消息提示，是有输入（与用户有交互），建议自定义一个对话框，即先预订一个对话框，隐藏起来，需要时打开。 -->

     <h2>测试</h2>

     <input type="button" onClick="msgbox(1)" value="点击弹出输入框">

     <script>

         function msgbox(n){

             document.getElementById('inputbox').style.display=n?'block':'none';     /* 点击按钮打开/关闭 对话框 */

         }

      </script>  

      <div id='inputbox' class="box">

         <a class='x' href=''; onclick="msgbox(0); return false;">关闭</a>

         <input type="text">

         <input type="text">

         <input type="button" value="确定">

      </div>

 </body>

JS实现弹出层对话框的更多相关文章

  1. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  2. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  3. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  4. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  5. js 实现弹出层效果

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  7. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  8. Layui关闭弹出层对话框--刷新父界面

    在毕设的开发中,添加用户.添加权限等等一些地方需要类似于bootstrap中的模态框.然而开发用的却是layui 在layui中有弹出层可以实现其中的效果. 但是,一般用的时候都是提交后关闭窗口,刷新 ...

  9. JS实现弹出层效果

    很多时候我们想去某某网站干点什么的时候,就会让我们先注册登录后才可以访问内容,而现在很多网站注册登录的时候都会有一种遮罩层的效果,就是背景是带有透明度的黑色遮罩,盖满整个网站,然后登录框弹出固定在屏幕 ...

随机推荐

  1. String 归档

    1.古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:,请编写一个程序,使用上述算法加密或解密用户输入的英文字串要求设计思想.程序流程图.源代码.结果截图. 设计思想: 1)输入一个字符串str( ...

  2. Android JIT实时编译器的设置

    在Android  JIT实时编译是在Android 2.2之后才引入的,JIT编译器可以显著的提高机器的性能,经过测试,android 2.2的性能较android 2.1提高了 2-5倍.JIT提 ...

  3. 编译PHP5缺t1lib包安装

    t1lib_doc.dvi Error解决: 1. 下载t1lib-5.1.2.tar.gz2. 解决依赖关系:sudo apt-get build-dep t1lib 3. 安装:./configu ...

  4. Amazon RDS MySQL数据库还原时 log_bin_trust_function_creators 错误解决办法

    使用了Amazon AWS EC2免费云空间,数据库实例采用Amazon RDS.原来在Windows Server上有一个存在大量数据的MySQL数据库.现在需要在Amazon RDS上还原这个My ...

  5. Java设计模式5：原型模式

    原型模式 原型模式属于对象的创建模式,通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象,这就是原型模式的用意. 原型模式结构 原型模式要求对象实现一个 ...

  6. 浏览器兼容性小记-DOM篇（一）

    1.childNodes引入空白节点问题:使用childElementCount或children 2.innerText: FF中不支持该属性,使用textContent代替 3.变量名与某HTML ...

  7. C#抓取网页HTML内容

    网上很多内容采集工具,今天就自己试着写一个,发现C#可以轻松的抓去网页的内容,进而通过正则来分离出自己感兴趣的数据.下面是抓去网页内容的代码: using System; using System.C ...

  8. [专业名词·硬件] 1、等效串联电阻ESR概述及稳压电路中带有一定量ESR电容的好处

        一.等效串联电阻ESR概述 ESR是Equivalent Series Resistance的缩写,即“等效串联电阻”.理想的电容自身不会有任何能量损失,但实际上,因为制造电容的材料有电阻,电 ...

  9. php json与xml序列化/反序列化

    在web开发中对象的序列化与反序列化经常使用,比较主流的有json格式与xml格式的序列化与反序列化,今天想写个jsop的小demo,结果发现不会使用php序列化,查了一下资料,做个笔记 简单数组js ...

  10. Java正则表达式应用详解

    如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理文本和匹配模式是多么简单.如果你不熟悉这个术语,那么“正则表达式”(Regular Expression)就是一个字 ...