<jquery>基本的模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义模态</title>
<style>
.cover {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 998;
} .modal {
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
} .hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送</button>
<button id="b2">油腻的师姐,在哪里</button>
<div class="cover hide"></div>
<div class="modal hide">
<form action="">
<p>
<label for="">用户名:
<input type="text">
</label>
</p>
<p>
<label for="">密码:
<input type="password">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//找出标签
$("#b1,#b2").click(function () {
//把cover和modal展示出来
$(".cover").removeClass("hide");
$(".modal").removeClass("hide");
})
$("#cancel").click(function () {
$(".cover").addClass("hide");
$(".modal").addClass("hide"); })
</script>
</body>
</html>
<jquery>基本的模态框的更多相关文章
- jquery 修改 bootstrap模态框的宽度并且居中
1.定义模态框 <div class="modal fade" id="Project_Cell_Modal" tabindex="-1&quo ...
- jQuery 实现 bootstrap 模态框 删除确认
思路: 点击删除按钮,通过jquery将删除操作的URL赋值到页面URL元素,并弹出会话框 用户点击确认,通过jquery获取URL,并发送删除请求至后台. 一.删除button <a clas ...
- 15款最好的 jQuery Modal（模态窗口）插件
jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- 五子棋项目总结 JavaScript+jQuery（插件写法）+bootstrap（模态框）
Html部分(界面): 1.五子棋棋盘由canvas完成: 2.两个按钮,样式由bootstrap完成: 3.菜单按钮对应的模态框,可以选择游戏模式:玩家自由对战,和电脑对战,还可以指定谁先执子和哪个 ...
- jQuery点击弹出层，弹出模态框，点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- jQuery练习：表单模态框
代码:基于事件冒泡原理和事件委托 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...
- [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 区别 |python-pandas库set_index、reset_index用法区别
1.set_index() 作用:DataFrame可以通过set_index方法,将普通列设置为单索引/复合索引. 格式:DataFrame.set_index(keys, drop=True, a ...
- 使用CGIHTTPServer搭建简单网站
目录 一.前提准备 二.搭建web网站 如何快速搭建web网站?这个问题对于我这样的小白来说简直就是一脸懵逼毫无头绪.在学习python的过程接触到了 CGI 编程,至于CGI是什么?怎么运行的?这我 ...
- MTT：任意模数NTT
MTT:任意模数NTT 概述 有时我们用FFT处理的数据很大,而模数可以分解为\(a\cdot 2^k+1\)的形式.次数用FFT精度不够,用NTT又找不到足够大的模数,于是MTT就应运而生了. MT ...
- tensorflow run()和 eval()
eval()只能用于tf.Tensor类对象,也就是有输出的Operation.对于没有输出的Operation, 可以用.run()或者Session.run() 所以我们训练的时候,对于优化器只能 ...
- Rabbit MQ 基础入门
Rabbit MQ 学习(一)基础入门 简介 RabbitMQ 简介 为什么选择 RabbitMQ RabbitMQ 的模型架构是什么? AMQP 协议是什么? AMQP 常用命令 概念 生产者和消费 ...
- 本地 win7 与虚拟机Centos7 ping互通和Centos7 上网设置
VM 12 安装虚拟机我就不表示了 很简单网上找找 一 .虚拟机设置 1.修改使用了 VMWare 12 虚拟机,Oracle VM 用得有点晕 2.配置VM 的NET环境 3.在VMware虚拟机任 ...
- hashmap1.7的死锁模拟
package com.cxy.springdataredis.hashmap; import javax.lang.model.element.VariableElement; import jav ...
- (转)C++ 11 多线程--线程管理
说到多线程编程,那么就不得不提并行和并发,多线程是实现并发(并行)的一种手段.并行是指两个或多个独立的操作同时进行.注意这里是同时进行,区别于并发,在一个时间段内执行多个操作.在单核时代,多个线程是并 ...
- 6_再次开中断STI的正确姿势
1 直接开启sti --蓝屏 2 配置环境 正确开启sti 中断 kpcr -- 很多重要线程切换的数据.结构 进入内核的时候 fs 不再是teb/tib: 是kpcr. 同时观察 kifastcal ...
- 能轻松背板子的FWT（快速沃尔什变换）
FWT应用 我不知道\(FWT\)的严格定义 百度百科和维基都不知道给一坨什么****东西** FWT(Fast Walsh Fransform),中文名快速沃尔什变换 然后我也不知道\(FWT\)到 ...