<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> ...
随机推荐
- 压缩图片大小(Java源码)
/** * * 直接指定压缩后的宽高: * @param oldFile * 要进行压缩的文件 * @param width * 压缩后的宽度 * @param height * 压缩后的高度 * @ ...
- 暴力模拟——cf988E
很简单的题,就是模拟一下 #include<bits/stdc++.h> using namespace std; #define ll long long ll n,a[],len; i ...
- 判断语句 (a>b)?a:b【转载】
文章转载自https://blog.csdn.net/hyj1996818/article/details/81783513 今天刷题有看到一种我没学过的判断语句 感觉很高级的样子 我跟大家分享下我的 ...
- （转）JAVA国际化
转:http://www.cnblogs.com/jjtech/archive/2011/02/14/1954291.html 国际化英文单词为:Internationalization,又称I18N ...
- LeetCode 176. Second Highest Salary (第二高的薪水)
题目标签: 题目给了我们一个工资表,让我们返回第二高的工资. 利用Max,把第一高的工资找到,然后利用 NOT IN,去找到第二高的工资. Java Solution: Runtime: 153ms ...
- 整理及优化CSS代码的7个原则
作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞 ...
- 未知高宽的div在其父级div中垂直居中显示
(一)如果已知子div的高宽 .father { position: relative; } .child { width: 100px; height: 80px; position: absolu ...
- ie8以下不兼容h5新标签的解决方法
HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...
- Spring注解基础学习总结
1.依赖注入注解: @Component:Bean注入到Spring容器组件(通用) @Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE):Bean作用域( ...
- BBS论坛 注册功能
三.注册功能 # views.py文件 def register(request): back_dic = {'code': 100, 'msg': ''} form_obj = myforms.My ...