js之模态对话框
目标效果:点击页面按钮,显示模态对话框,在模态对话框里点击取消关闭模式对话框。
效果如下
实现代码如下:
<!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之模态对话框的更多相关文章
- 模态对话框 bootstrap-modal.js
调用方式 通过data属性 无需编写JavaScript代码即可生成一个对话框.在一个主控元素,例如按钮,上设置data-toggle="modal",然后再设置data-targ ...
- 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...
- 关于easyUI的模态对话框
本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址.博客园蜗牛cnblogs.com/tdws 会用easyUI的模态对话框会是我们的开发更加简洁,只需下载这个插件,把需要的文件拖到项目 ...
- AngularJS 模态对话框
本文内容 项目结构 运行结果 index.html mymodal.js 参考资料 本文讲解 Angular JS 实现模式对话框.基于 AngularJS v1.5.3.Bootstrap v3.3 ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- bootstrap模态对话框
bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...
- AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID
AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...
- 小程序 模态对话框自定义组件(modal)
1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...
随机推荐
- MFC中的Debug Assertion Failed 如何查找原因
编写MFC程序时经常会遇到下图所示的断言失败问题 报错对话框中给出了一个目录,是在F盘,但是查找之后会发现电脑里可能根本没有这个目录. 最后发现可以在VS的安装目录下找到这个文件: \atlmfc\s ...
- Android 监听耳机的插拔事件
一般采用的是动态监听的方式来实现的: package com.renhui.ej; import android.content.BroadcastReceiver; import android.c ...
- Sublime Text3176激活码
此激活码为版本号为3176的激活码: 首先更改hosts文件防止Sublime Text3联网验证: Mac上hosts文件路径为/etc/hosts,所以需要sudo vim /etc/hosts ...
- SVN 客户端 TortoiseSVN 的安装和使用
关于 参考博客:TortoiseSVN新人使用指南 TortoiseSVN 是一个 Apache Subversion(SVN)客户端,实现为Windows外壳扩展.它直观且易于使用,因为它不需要Su ...
- 上下文无关的GMM-HMM声学模型
一.语音识别基本介绍 (一)统计语音识别的基本等式 X------声学特征向量序列,观测值 W------单词序列 W*------给定观测值下,概率最大的单词序列 应用贝叶斯理论等价于 进而得出统计 ...
- [EXP]Drupal < 8.5.11 / < 8.6.10 - RESTful Web Services unserialize() Remote Command Execution (Metasploit)
## # This module requires Metasploit: https://metasploit.com/download # Current source: https://gith ...
- 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...
- 取消vim打开文件全是黄色方法
如下图: 取消方法: 按下esc键 :nohl 回车
- Consul内部分享ppt
Consul 是一个支持多数据中心,分布式,高可用的服务发现和配置共享系统.由 HashiCorp 公司使用 Go 语言开发,基于Raft协议.部署起来非常容易,只需要极少的可执行程序和配置文件,具有 ...
- mysql 开发进阶篇系列 39 mysql日志之二进制日志(binlog)
一.概述 二进制日志(binlog)记录了所有的DDL(数据定义语言)语句和DML(数据操纵语言)语句,但是不包括数据查询语句, 语句以"事件"的形式保存,它描述了数据的更改过程, ...