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

效果图：

源码：

<!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. Bookstore project using XAMPP 详细配置 Part 2

    2. Implementation of MySQL database in “phpMyAdmin” 1) Create database named “tbl_book” 2) I changed ...

  2. 屏幕适配1（Android 增强版百分比布局库 为了适配而扩展）

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 这篇博文写得太好了,让我很激动,分 ...

  3. Objective-C 关联

    在项目开发中,经常会使用到关联,就是将两个实例对象绑定,使得其中一个实例对象成为另一个实例对象的一部分.关联特性在mac os 10.6 及ios 3.1以上才可以使用. 关联的使用是基于关键字来实现 ...

  4. oracle表空间不足时的处理方法

    由于数据文件路径下的空间不足或表空间不足时,需要更换或扩展或新增表空间时,以下简单介绍下几种处理方式(数据文件/opt/oracle/oradata/testdb.dbf,原大小为100M) 一.扩大 ...

  5. HTML +　ＪＳ随机抽号。

    [设置第三次抽取的号码为 (张三6)]<script language="javascript"> var k = 0 ; function star(){ k++ ; ...

  6. Spring声明式事务管理基于@Transactional注解

    概述:我们已知道Spring声明式事务管理有两种常用的方式,一种是基于tx/aop命名空间的xml配置文件,另一种则是基于@Transactional 注解.         第一种方式我已在上文为大 ...

  7. iOS上简单推送通知（Push Notification）的实现

    iOS上简单推送通知(Push Notification)的实现 根据这篇很好的教程(http://www.raywenderlich.com/3443/apple-push-notification ...

  8. c# gridview数据列表中NamingContainer容器的用法

    当在前台我们绑定了一个linkbutton型的按钮,并触发了onserverclick="delBook_Server"的服务端事件,前台代码如下: <asp:Templat ...

  9. pthread——pthread_cleanup

    Pthread_cleanup用于注册线程清理函数,注册的清理函数将在线程被取消或者主动调用pthread_exit时被调用:     一个简单的示例: #include <pthread.h& ...

  10. Golang通过Thrift框架完美实现跨语言调用

    每种语言都有自己最擅长的领域,Golang 最适合的领域就是服务器端程序. 做为服务器端程序,需要考虑性能同时也要考虑与各种语言之间方便的通讯.采用http协议简单,但性能不高.采用TCP通讯,则需要 ...