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

效果图：

源码：

<!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. android IOC框架学习记录

    一.框架如下几种: 1.Roboguice   2.Spring for Android   3.afinal   4.xUtils   二.Roboguice说明 项目地址:https://gith ...

  2. DOM技术实现竞赛题页面

    DOM技术实现竞赛题页面 这一段时间学习了DOM操作和JS开发,我就自己开发一个竞赛题的页面. 一.业务需求 1.目标:做一个一百道选择题的页面 2.功能: 显示题目和选项. 下一题上一题的按钮,到第 ...

  3. 几个非常有用的js小函数

    function $(v){ if(typeof v==="function"){ window.onload=v; }else if(typeof v==="strin ...

  4. GCC 源码编译 mpc mprf gmp 不用make（否则会有lib/libgmp.so: could not read symbols: File in wrong format等错误）

    错误信息: lib/libgmp.so: could not read symbols: File in wrong formatcollect2: error: ld returned 1 exit ...

  5. mysql5.7 代价模型浅析

    代价模型 mysql 5.7.10代价计算相对之前的版本有5.7 代价模型浅析较大的改进.例如 代价模型参数可以动态配置,可以适应不同的硬件 区分考虑数据在内存和在磁盘中的代价 代价精度提升为浮点型 ...

  6. VS2012 编译带有c/c++代码的python模块失败解决方案

    python2.7默认编译带有/c++代码的模块/包是使用VS2008环境变量,所以为了可用,我们要在编译前设置环境变量 SET VS90COMNTOOLS=%VS110COMNTOOLS% 但有时只 ...

  7. Xamarin.Android经验之谈

    1.Fragment如何做到显示才加载数据 有些界面我们会采用套用多个Fragment来显示的效果,但是我们不会在一显示这个活动的时候就把所有的Fragment加载并加载数据,而是会让显示出来的Fra ...

  8. 给 admin 新建的 hdfs 文件的权限

    su hdfs hdfs dfs -chown -R admin /   org.apache.hadoop.security.AccessControlException: Permission d ...

  9. 给Java程序猿们推荐一些值得一看的好书

    学习的最好途径就是看书 "学习的最好途径就是看书",这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两点好处: 1.能出版出来的书一定是经过反复的思考.雕琢和审核的 ...

  10. SQLSERVER取当前月第一天和最后一天

    --本月第一天: select   dateadd(dd,-day(getdate())+1,getdate()) --本月最后一天: SELECT dateadd(ms,-3,DATEADD(mm, ...