<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> ...
随机推荐
- sublime快捷键汇总
Sublime Text 3 快捷键精华版 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所 ...
- GdiPlus 一个给 Delphi 提供的新的 GDI+ 接口很好用!
尽管 GDI+ 已经有近 10 年的历史(随 Win2000 推出), 尽管 DirectX 如日中天, 但在 Windows 7 之前的版本下进行 2D 绘图还是离不开它, 微软也没有停止对它的升级 ...
- hdu多校第五场1006 （hdu6629） string matching Ex-KMP
题意: 给你一个暴力匹配字符串公共前缀后缀的程序,为你对于某个字符串,暴力匹配的次数是多少. 题解: 使用扩展kmp构造extend数组,在扩展kmp中,设原串S和模式串T. extend[i]表示T ...
- O(n)线性时间求解第k大-HDU6040-CSU2078
目录 目录 思路 (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 HDU6040:传送门 \(m(m\leq 100)\)次查询长度为\(n(n \leq 1e7)\)区间的 ...
- ionic-CSS：ionic 卡片
ylbtech-ionic-CSS:ionic 卡片 1.返回顶部 1. ionic 卡片 近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具. 针对移动端的应用,卡片会根据 ...
- 消息中间件kafka学习记录
目录 1. 概述 2. 环境准备 3. 命令行常用命令 4. java api实现 1. 概述 Apache Kafka是一个分布式消息系统,凭借其优异的特性而被广泛使用. 高性能:O(1)复杂度消息 ...
- 2.1_springboot2.x消息介绍&RabbitMQ运行机制
1.概述 1.大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力 2.消息服务中两个重要概念: 消息代理(message broker)即消息服务器 和目的地(destination ...
- Pytorch模型定义的三要
首先,必须继承nn.Module这个类,要让Pytorch知道这个类是一个Module. 其次,在_init_(self)中设置需要的组件,比如(Conv,Pooling,Linear,BatchNo ...
- dubbo jar 配置文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- iOS开发系列-iOS适配
概述 发布iPhone X 系统版本为iOS11, 由于刘海屏原因需要对新的机型做适配. iPhone X safeArea iOS11苹果提出safeArea替代iOS7引入 topLayoutGu ...