目标效果：点击页面按钮，显示模态对话框，在模态对话框里点击取消关闭模式对话框。

效果如下

实现代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

 <table>

     <tr>

         <td>1</td>

         <td>2</td>

         <td>

             <input type="button" value="点击" onclick="show()">

         </td>

     </tr>

 </table>

<div id="two" class="c2 hide"></div>

<div id="three" class="c3 hide">

    用户名<input type="text">

    <br>

    密码<input type="password">

    <br>

    <input type="button" value="取消" onclick="Hide()">

</div>

<style>

    .hide{

        display: none;

    }

    .c3{

        height: 100px;

        width: 300px;

        background-color: white;

        position: fixed;

        top: 50%;

        left: 50%;

        margin-top: -150px;

        margin-left: -150px;

        z-index: 3;

    }

    .c2{

        background-color: rgba(0,0,0,0.3);

        position: fixed;

        top: 0px;

        bottom: 0px;

        left: 0px;

        right: 0px;

        z-index: 2;

    }

</style>

<script type="text/javascript">

    function show() {

        document.getElementById('two').classList.remove('hide');

        document.getElementById('three').classList.remove('hide');

    }

    function Hide() {

        document.getElementById('two').classList.add('hide');

        document.getElementById('three').classList.add('hide');

    }

</script>

</body>

</html>

js之模态对话框的更多相关文章

  1. 模态对话框 bootstrap-modal.js

    调用方式 通过data属性 无需编写JavaScript代码即可生成一个对话框.在一个主控元素,例如按钮,上设置data-toggle="modal",然后再设置data-targ ...

  2. 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

    引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...

  3. 关于easyUI的模态对话框

    本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址.博客园蜗牛cnblogs.com/tdws 会用easyUI的模态对话框会是我们的开发更加简洁,只需下载这个插件,把需要的文件拖到项目 ...

  4. AngularJS 模态对话框

    本文内容 项目结构 运行结果 index.html mymodal.js 参考资料 本文讲解 Angular JS 实现模式对话框.基于 AngularJS v1.5.3.Bootstrap v3.3 ...

  5. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  6. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  8. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  9. 小程序 模态对话框自定义组件(modal)

    1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...

随机推荐

  1. BASH 环境

    本节内容 1.  什么是shell 2.  命令的优先级 3.  元字符 4.  登录shell与非登录shell 一  什么是shell shell一般代表两个层面的意思,一个是命令解释器,如bas ...

  2. 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意

    [源码下载] 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意 作者:webabcd 介绍背水一战 Windows 10 之 用户和账号 获取用户的信息 获 ...

  3. Adobe Photoshop CC 2019画板背景色白底如何去掉？

    Adobe Photoshop CC 2019画板背景色白底切透明图片很不方便,有两种方法可以解决: 第一种方法: 新建文档的时候直接背景内容直接选择透明 若设计师提供的设计稿是白底也没关系,就是第二 ...

  4. C++数组,sort

    cmake_minimum_required(VERSION 3.5) project(Test) add_executable( te test.cpp ) test.cpp #include &l ...

  5. PICE（6）：集群环境里多异类端点gRPC Streaming - Heterogeneous multi-endpoints gRPC streaming

    gRPC Streaming的操作对象由服务端和客户端组成.在一个包含了多个不同服务的集群环境中可能需要从一个服务里调用另一个服务端提供的服务.这时调用服务端又成为了提供服务端的客户端了(服务消费端) ...

  6. 使用广播-BroadcastReceiver最详细解析

    女孩:BroadcastReceiver是什么呀? 男孩:Broadcast是广播的意思,在Android中应用程序之间的传输信息的机制,BroadcastReceiver是接收广播通知的组件,广播和 ...

  7. Swift5 语言指南(十四) 下标

    类,结构和枚举可以定义下标,下标是用于访问集合,列表或序列的成员元素的快捷方式.您可以使用下标按索引设置和检索值,而无需单独的设置和检索方法.例如,您可以访问在元素Array实例作为someArray ...

  8. linux下的初始化系统systemd简科普

    systemd是什么?名字很奇怪,不认识. 扒一扒wiki,你就会知道我是谁了? 在下有眼不识泰山,原来你就是盘古老爷爷用的开天辟地大斧头啊. 贫穷不可怕,可怕的是贫穷限制了你的想象--------- ...

  9. Spring.Net封闭业务类为WebService注意点和问题

    最近遇到的一个项目中用到了标题所说的方法,用Spring.Net将业务类封闭成WebService供其它地方调用使用,感觉还是蛮新鲜的,于是在园子中搜了一篇园友写的文章(这里)自己也尝试着搭了一个环境 ...

  10. Windows10开发手记－Windows App Certification Kit使用教程

    最近有同学通过MVP的渠道询问我Windows 10应用提交审核前是否有工具能够像win7一样做App兼容性测试,其实Windows SDK已经继承了一套优秀的App测试认证工具,这可以帮助我们快速通 ...