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

效果如下

实现代码如下：

<!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. lgwr的两种模式（post/wait和polling）

    11.2之前,oracle的lgwr写入模式为post/wait 11.2之后新增了polling模式,可以与post/wait模式自动切换 通过隐藏参数 _use_adaptive_log_file ...

  2. 关于ASP.NET MVC 中JsonResult返回的日期值问题

    最近开始用MVC做项目,在使用 JsonResult返回数据的时候,日期被反射成了/Date 1233455这种格式,遍查网上都是在客户端使用JS来处理这个问题的,这样的话,就需要在每一个涉及到日期的 ...

  3. linux安全加固浅谈

    难易程度:★★★阅读点:linux;python;web安全;文章作者:xiaoye文章来源:i春秋关键字:网络渗透技术 前言linux被越来越多的企业使用,因此掌握一些基本的linux安全加固是有必 ...

  4. Android开发工程师文集-Fragment，适配器，轮播图，ScrollView，Gallery 图片浏览器，Android常用布局样式

    Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...

  5. Java学习笔记53（网络编程：TCP协议案例）

    简易的案例 客户端: package demo; import java.io.IOException; import java.io.InputStream; import java.io.Outp ...

  6. [Swift]LaunchScreen.storyboard设置启动页

    设置[General]->[App Icons and Launch Images] 注意:当App不是用LaunchScreen.xib来配置启动页时,[LaunchScreen File]置 ...

  7. Python函数——装饰器

    前言 给下面的函数加上运行时间 def fib(n): a, b = 0, 1 for i in range(n): print(b) a, b = b, a+b return b a = fib(5 ...

  8. Python3自动化运维之Fabric模版详解

    一.概要 Fabric是基于Python(2.7,3.4+以上版本)实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括 ...

  9. mysql 开发进阶篇系列 29 数据库二进制包安装

    概述 对于二进制安装,优点是可以安装到任何路径下,灵活性好,一台服务器可以安装多个mysql.缺点是已经绎过编译,性能不如源码编译得好,不能灵活定制编译参数.如果用户即不想安装最简单却不够灵活的RPM ...

  10. 高可用Hadoop平台－Oozie工作流

    1.概述 在开发Hadoop的相关应用使用,在业务不复杂,任务不多的情况下,我们可以直接使用Crontab去完成相关应用的调度.今天给大家介绍的是统一管理各种调度任务的系统,下面为今天分享的内容目录: ...