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

效果如下

实现代码如下：

<!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. eclipse经常出现——未响应！！！

    现象:启动eclipse缓慢,启动完成经常出现未响应情况.偶然在打开一个项目时候,也出现未响应. 原因:虚拟内存不足,或者电脑本身内存不足.但是目前绝大多数PC而言,内存应该是充足的,因此可以修改虚拟 ...

  2. ASP.NET MVC下使用AngularJs语言(二)：ng-click事件

    程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...

  3. input可以自动换行吗？？？

    某天,在项目开发的时候,后台java问我input可以换行吗,当时我也是有点懵逼,思考了几秒钟说应该可以,然后就开始尝试各种方法.然后,然后就打脸了.... 最后发现,原来input没有自动换行功能, ...

  4. Linux - 利用systemctl命令管理服务

    systemctl命令是系统服务管理器指令,融合了service和chkconfig的功能,可以查看和设置服务. 这里以docker服务为例. 利用systemctl命令管理 显示服务状态:syste ...

  5. Tools - OpenSSL

    OpenSSL http://www.openssl.org/ OpenSSL is an open source project that provides a robust, commercial ...

  6. MarkDown基础语法记录

    基础语法记录,其中有一些博客园暂不支持 <!--标题--> # 一级标题 # ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 一级标题 ...

  7. vue 自动化部署 jenkins 篇

    前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署.这种重复性的工作,确实有点让人烦,而且效率也不高. 本文基于 vue 的前端项目. GitHub 的代码仓库,简 ...

  8. Java高并发之线程池详解

    线程池优势 在业务场景中, 如果一个对象创建销毁开销比较大, 那么此时建议池化对象进行管理. 例如线程, jdbc连接等等, 在高并发场景中, 如果可以复用之前销毁的对象, 那么系统效率将大大提升. ...

  9. 首个hybird商业项目踩坑总结

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  10. [java初探外篇]__关于StringBuilder类与String类的区别

    前言 我们前面学习到String类的相关知识,知道了它是一个字符串类,并且了解到其中的一些方法,但是当时并没有太过注意到String类的特点,今天就StringBuilder类的学习来比较一下两者的区 ...