jquery实现一个简单好用的弹出框


Posted in Javascript onSeptember 26, 2014

自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用。喜欢就拿走吧!

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery实现弹出登陆窗口</title> 
<script src="./jquery-1.11.1.min.js"></script><!--本地的 一定要引进jquery才有效哦 --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> 
<script> 
jQuery(document).ready(function($) { 
$('.login').click(function(){ //jquery的点击事件 
$('.body-color').fadeIn(100);//全局变得黑的效果,具体的div就是theme-popover-mask这个 
$('.hide-body').slideDown(200);//将隐藏的窗口div显示出来 
}) 
$('.close-window .close').click(function(){ 
$('.body-color').fadeOut(100);// 
$('.hide-body').slideUp(200);//将显示的窗口隐藏起来 
}) 

}) 
</script> 
</head> 
<!-- 整个弹出框分为三个主体,一个是关闭的div 一个中间主要显示的div 最后一个就是增加其他内容的div --> 
<body> 
<div> 
<!-- 这就是点击事件的触发,其中 theme-login是可以修改的 --> 
<a class="login btn" href="javascript:;">点击查看效果</a> 
</div> 
<div class="hide-body"> 
<div class="close-window"> 
<!-- 关闭窗口,也就是触发关闭div的事件--> 
<a href="javascript:;" title="关闭" class="close">×</a> 
<h3>登录 是一种态度</h3> 
</div> 
<!-- 中间主体显示div 可以增加其他的样式--> 
<div class="login-body dform"> 
<form class="signin" name="loginform" action="" method="post"> 
<ol> 
<li><h4>你必须先登录!</h4></li> 
<li><label for="username">用户名:</label><input class="ipt" 
type="text" id="username" value="lnc" size="20" /></li> 
<li><label for="password">密 码:</label><input 
class="ipt" type="password" id="password" value="***********" 
size="20" /></li> 
<li><input class="btn btn-primary" type="submit" name="submit" 
value=" 登 录 " /></li> 
</ol> 
</form> 
</div> 
<!-- 底部的div --> 
<div class="bottom"> 
<hr> 
<pre>底部部分文字显示哦</pre> 
</div> 
</div> 

<div class="body-color"></div> 

</body> 
</html> 

<style> 
.btn { 
position: relative; 
cursor: pointer; 
display: inline-block; 
vertical-align: middle; 
font-size: 12px; 
font-weight: bold; 
height: 27px; 
line-height: 27px; 
min-width: 52px; 
padding: 0 12px; 
text-align: center; 
text-decoration: none; 
border-radius: 2px; 
border: 1px solid #ddd; 
color: #666; 
background-color: #f5f5f5; 
background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1); 
background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1); 
background: linear-gradient(top, #F5F5F5, #F1F1F1); 
} 

.login-body { 
padding: 60px 15px; 
color: #444; 
height: 148px; 
} 

.ipt { 
border: solid 1px #d2d2d2; 
border-left-color: #ccc; 
border-top-color: #ccc; 
border-radius: 2px; 
box-shadow: inset 0 1px 0 #f8f8f8; 
background-color: #fff; 
padding: 4px 6px; 
height: 21px; 
line-height: 21px; 
color: #555; 
width: 180px; 
vertical-align: baseline; 
} 

.dform { 
padding: 80px 60px 40px; 
text-align: center; 
} 

.signin { 
margin: -50px -20px -50px 90px; 
text-align: left; 
font-size: 14px; 
} 

.signin h4 { 
color: #999; 
font-weight: 100; 
margin-bottom: 20px; 
font-size: 12px; 
} 

.signin li { 
padding-left: 80px; 
margin-bottom: 15px; 
} 

.signin ol { 
list-style-type: none; 
} 

.signin li strong { 
float: left; 
margin-left: -80px; 
width: 80px; 
text-align: right; 
line-height: 32px; 
} 

.signin .btn { 
margin-bottom: 10px; 
} 

.signin p { 
font-size: 12px; 
color: #999; 
} 

.theme-desc,.theme-version { 
padding-top: 0 
} 

.body-color { 
z-index: 9998; 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity: 0.4; 
filter: alpha(opacity = 40); 
display: none 
} 

.hide-body { 
z-index: 9999; 
position: fixed; 
top: 30%; 
left: 40%; 
width: 1000px; 
height: 618px; 
margin: -180px 0 0 -330px; 
border-radius: 5px; 
border: solid 2px #666; 
background-color: #fff; 
display: none; 
box-shadow: 0 0 10px #666; 
} 

.close-window { 
border-bottom: 1px solid #ddd; 
padding: 22px; 
position: relative; 
} 

.bottom { 
margin-top: 180px; 
} 

.close-window .close { 
float: right; 
color: #999; 
padding: 5px; 
margin: -2px -5px -5px; 
font: bold 14px/14px simsun; 
text-shadow: 0 1px 0 #ddd 
} 

.close-window .close:hover { 
color: #444; 
} 
</style>

最终效果图:

jquery实现一个简单好用的弹出框

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 Javascript
php,js,css字符串截取的办法集锦
Sep 26 #Javascript
javascript中字符串拼接详解
Sep 26 #Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 #Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 #Javascript
前端轻量级MVC框架CanJS详解
Sep 26 #Javascript
alert出数组中的随即值代码
Sep 25 #Javascript
jquery得到iframe src属性值的方法
Sep 25 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python如何将装饰器定义为类
2020/07/30 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
财务主管岗位职责
2014/02/28 职场文书
一年级学生评语大全
2014/04/21 职场文书
校园文明倡议书
2014/05/16 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python