<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 识别验证码自动登陆
# python 3.5.0 # 通过Chrom浏览器访问发起请求 # 需要对应版本的Chrom和chromdriver # 作者:linyouyi from selenium import webd ...
- 关于windows下远程连接Linux服务器的方法(CentOs)
1.服务器端安装VNC 1) 安装vncserver yum install -y tigervnc-server 2) 修改配置 vi /etc/sysconfig/vncservers 最后两 ...
- js函数中的apply()、call()、bind()方法
ECMAScript中的函数是对象,因此函数也有属性和方法.每个函数都包含两个属性:length和prototype,且每个函数包含两个非继承而来的方法apply()和call().这两个方法的用途都 ...
- Java习题10.25
Java习题10.25 1. 实际上这道题考查的是两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型, 子类抛出异常小于等于父类方法抛出异常, 子类访问权限大于等于父类 ...
- CSS：CSS 实例
ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...
- org.mybatis总是认不出来的原因，pom.xml中有
idea打开maven project,然后就华丽丽的看见下载失败,怎么刷新都没有用. 请按以下步骤完成即可: https://blog.csdn.net/ZhengYanFeng1989/artic ...
- Spring随笔-核心知识DI与AOP
DI 依赖注入,使得相互依赖的组件松耦合. AOP 面向切面编程,使各种功能分离出来,形成可重用的组件.
- PAT_A1094#The Largest Generation
Source: PAT A1094 The Largest Generation (25 分) Description: A family hierarchy is usually presented ...
- Apache Shiro RememberMe 1.2.4 反序列化漏洞
拉取镜像 docker pull medicean/vulapps:s_shiro_1 启动环境 docker run -d -p 80:8080 medicean/vulapps:s_shiro_1 ...
- i++ 和 ++i 的区别
先说运算规则吧. i++ 是先赋值后自增:++i 是先自增后赋值. 以下是代码示例: int a=0; int b=0; int i=0; a=i++; System.out.println(&quo ...