jQuery写简单模态框
css代码
<style type="text/css">
body,div,a,p,span{
margin: 0;
padding:0;
}
.shade{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
z-index: 1;
display: none;
}
.login{
padding:10px;
border-radius: 10px;
width:300px;
height: 200px;
background: #fff;
position: absolute;
z-index: 2;
display: none;
}
span{
float: right;
cursor: pointer;
}
.title{
border-bottom: 1px #ccc solid;
text-align: center;
font-weight: bold;
padding:5px 0 10px 0;
}
</style>
html代码
<div class="shade"></div>
<div class="login">
<p class="title">弹出标题<span>×</span></p>
<p class="cont">弹出内容</p>
</div>
<a href="#">登录</a>
script 代码
<script type="text/javascript">
$(function(){
//浏览器大小发生改变
$(window).resize(function(){
showShade();
});
//模态框出现
$("a").bind("click",function(){
$(".shade").fadeIn(1000);
$(".login").fadeIn(1000);
$(this).css("display","none");
showShade();
});
//点击span关闭
$("span").bind("click",function(){
$(".shade").fadeOut(1000);
$(".login").fadeOut(1000);
});
//居中显示
function showShade(){
var $vW = $(window).width();
var $w = $(".login").outerWidth();
var $vH = $(window).height();
var $h = $(".login").outerHeight();
$(".login").css({"left":($vW - $w)/2 + "px","top":($vH - $h)/2 + "px"});
};
//绑定键盘事件 按下esc键退出
$(document).keyup(function(ev){
// alert(ev.keyCode); 获取esc的键码27
if(ev.keyCode == 27){
// $("span").click();
//模拟事件
$("span").trigger("click");
}
})
})
</script>
jQuery写简单模态框相关推荐
- JQuery模拟boostrap模态框效果
JQuery模拟boostrap模态框效果 1.单个模态框代码案例: <!doctype html> <html> <head> <meta charset= ...
- 基于JQuery 改造bootstrap模态框拖动功能
看不爽现有的bootstrap拖动实现,自己也手痒,就自己写了一个拖动处理. PS:其他实现拖动方法 http://www.gbtags.com/gb/rtreplayerpreview/230.ht ...
- 用jQuery写简单的计时器
只显示当前的时分秒,以下代码直接运行即可 关键起作用的就是这个函数 setInterval(),第二个参数1000代码1000毫秒,也就是1秒,调用一下函数 f(), id为timer里面的内容就被替 ...
- jQuery 模态框
使用原生jQuery编写一个模态框 实际上, 模态框就是一个大的div进行绝对定位,遮住本来的页面,使用户无法点击页面 以下粘一个代码 <!DOCTYPE html> <html l ...
- html模态框常见问题,模态框无法弹出的问题
问题起因: 昨晚写到了一个模态框,用到了bootstrap和jquery,依赖的js已经复制到项目中,并在Jsp页面上进行了引用,最初的引用如下: 问题描述: 模态框无法正常弹出,使用浏览器查看资源看 ...
- 原生态js实现充话费功能（模态框 + tab选项卡）
之前分开写了模态框和选项卡的功能,今天把模态框和tab选项卡综合起来实现了充话费的功能,其实原理很简单,就是点击tab标题时,让它所对应的内容显示出来,可以用display:none,基本代码如下: ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消 确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
- SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
场景 实现 Html代码 <div th:fragment="content"><div class="ibox float-e-margins&quo ...
最新文章
- 自然语言处理NLP-100例 | 第三篇：骚扰短信识别 MultinomialNB实现（内附源码）
- ASP.NET aspx页面中 写C#脚本; ASP.NET 指令（%@%）;
- 蓝桥杯2015初赛-加法变乘法-枚举
- leetcode346. 数据流中的移动平均值
- 一篇综述翻译解读文章的发出也需要数易其稿
- java选择排序不稳定_选择排序就这么简单 - Java3y的个人空间 - OSCHINA - 中文开源技术交流社区...
- Android 中的线程池
- 塞班、libc.lib、系统错误-1、KErrNotFound、内嵌sis、embedded sis
- PyCharm 的初始设置
- python翻译爬虫_python 翻译爬虫
- 使用宏将xlsx格式文件批量转为xls格式文件
- 常用计量单位及其换算
- MySQL 5.6.21下载安装之安装篇（二）
- 极米RS Pro 2值得买吗？极米科技这款4K投影真实体验怎么样？
- 华为AC旁路二层组网隧道转发示例
- 区块链+慈善究竟帮助过谁？
- 一页纸项目管理，附图表模板，可免费领取 | 再大的项目，都能用1页纸讲明白
- hudi系列-changelog的读写
- Unity绿幕实时抠图，
- java实现item-cf_基于用户（UserCF）和物品（ItemCF）协同过滤算法的比较哈利波特问题...