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

效果图：

源码：

<!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. 统一SDK接入(U8SDK)——总体思路和架构

    题记:很多做游戏开发的人,估计都或多或少地接过渠道SDK,什么UC,当乐,91,小米,360……据统计国内市场当前不下于100家渠道,还包括一些没有SDK的小渠道.每个渠道SDK接入的方法呢,多是大同 ...

  2. 用Win7自带的磁盘管理工具给硬盘分区

    最近新买了一台笔记本,要给硬盘分几个区,心想还是用个工具方便点,于是就上网准备下个“硬盘分区魔术师”,但是看到有一篇文章介绍Win7系统也自带了硬盘分区工具,这我以前倒没听说过,试了一下,还挺方便好用 ...

  3. 编码符_new

    begin#6BE3803ED5339EBA1028EF9FC2BBD85F196391DFC603EAE8B10BA25D0B69029667A9BD2D914CE59A26EF5ECF370D5C ...

  4. Replication的犄角旮旯（四）--关于事务复制的监控

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  5. 解剖SQLSERVER 第十一篇 对SQLSERVER的多个版本进行自动化测试（译）

    解剖SQLSERVER 第十一篇    对SQLSERVER的多个版本进行自动化测试(译) http://improve.dk/automated-testing-of-orcamdf-against ...

  6. [Openwrt 项目开发笔记]：Openwrt平台搭建（一）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...

  7. 接口分离原则（Interface Segregation Principle）

    接口分离原则(Interface Segregation Principle)用于处理胖接口(fat interface)所带来的问题.如果类的接口定义暴露了过多的行为,则说明这个类的接口定义内聚程度 ...

  8. 《C#图解教程》读书笔记之一：C#和.NET框架

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.在.NET之前的编程世界 C#语言是在微软公司的.NET框架上开发程序而设计的,首先作者给大家纠正了一下C# ...

  9. 一个App完成入门篇（五）- 完成新闻页面

    本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面. 导入项目 数据模板分离MVVM模型 自定义事件 展示新闻 九宫格展示 将要学习的demo效果图如下所示 1. 导入完整项目 本节示 ...

  10. 解读jQuery中extend函数

    $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...