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 ...
最新文章
- 漫画：如何在数组中找到和为 “特定值” 的三个数？
- 几款表贴LED反向电流特性
- VMware 11 安装Mac 10.9
- oracle和mysql的安装教程_客户端安装和配置（1） - Oracle 10g 安装图解教程_数据库技术_Linux公社-Linux系统门户网站...
- 前端学习（848）：为什么学习节点操作和节点简介
- Python使用两个Event对象同步生产者消费者问题
- Lua笔记4 闭包、迭代器
- 关于Android屏幕适配
- 找到所需的产品或服务
- p5727深基5.例3冰雹猜想c语言,深基
- python2中print不换行及print不换行且无空格写法
- 大数至简，带您实现“数据自由”，炎凰数据免费社区版产品正式发布
- MySQL8.0 OCP最新版1Z0-908认证考试题库整理-006
- python设置背景图片大全_Python实例讲解 - tkinter canvas (设置背景图片及文字)
- win32编程的经典书籍
- 小米10s哈曼卡顿设置方法分享
- 今日免费PNG图标集下载 - SweetiePlus
- FusionCharts.js代码
- 台灯是白炽灯好，是LED护眼灯好？推荐对眼睛舒适的护眼台灯
- java基础编程之查询某一年的二月有多少天（通过Calendar类）