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

效果图：

源码：

<!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. java-注解

    概念 Annontation是Java5开始引入的新特征.中文名称一般叫注解.它提供了一种安全的类似注释的机制,用来将任何的信息或元数据与程序元素(类.方法.成员变量等)进行关联.更通俗的意思是为程序 ...

  2. maven配置阿里云镜像

    编辑%maven_home%/conf/settings.xml文件,添加 <mirror> <id>aliyun-maven</id> <mirrorOf& ...

  3. 关于CAP定理的个人理解

    CAP定理简介 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(C ...

  4. 写了一个简单的NodeJS实现的进程间通信的例子

    1. cluster介绍 大家都知道nodejs是一个单进程单线程的服务器引擎,不管有多么的强大硬件,只能利用到单个CPU进行计算.所以,有人开发了第三方的cluster,让node可以利用多核CPU ...

  5. 讲讲HashCode的作用

    前言 Object提供给我们了一个Native的方法“public native int hashCode();”,本文讲讲Hash是什么以及HashCode的作用 Hash 先用一张图看下什么是Ha ...

  6. Programming Erlang 学习笔记(一)

    入门 启动Shell 在cmd中输入命令”erl”,百分号(%)表示一个注释的开始,从百分号开始到这行结束的所有文本都被看做是注释. 一个完整的命令需要以一个句点和一个回车结束. 退出erlang的命 ...

  7. HTML目录生成工具

    目录 内容简介 工具代码 使用方法 工具改进 内容简介 园子里面很多博主都会为自己的博文创建目录,方便大家浏览.我很好奇大家是怎么做的,是不是有自动生成目录的工具可以推荐一下(我知道word可以,但是 ...

  8. Java提高篇(三二)-----List总结

    前面LZ已经充分介绍了有关于List接口的大部分知识,如ArrayList.LinkedList.Vector.Stack,通过这几个知识点可以对List接口有了比较深的了解了.只有通过归纳总结的知识 ...

  9. 在Mongoose中使用嵌套的populate处理数据

    假设有如下mongodb的schema定义: drawApply = new Schema({ salesId: { type: Schema.ObjectId, ref: 'sales' }, mo ...

  10. ios 设置亮度、声音；调用发短信、邮件、打电话

    一,设置亮度 [[UIScreen mainScreen] setBrightness:0.5];//0.0~1.0 二,设置声音 1,添加 MediaPlayer.framework 框架 2,在需 ...