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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JS中判断null的方法分析
Nov 21 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php向js函数传参的几种方法
2014/08/10 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python binascii 进制转换实例
2019/06/12 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
毕业自荐信
2013/12/16 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
自考生自我评价
2019/06/21 职场文书