jquery实现一个简单好用的弹出框
自己改写一些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实现两款有动画功能的导航菜单代码
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码.分享给大家供大家参考.具体如下: 这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
-
jquery实现美观的导航菜单鼠标提示特效代码
本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
js弹出框轻量级插件jquery.boxy使用介绍
当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 复制代码 代码如下: <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.ask("How are you feeling?", ["Great&q
-
jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB
-
使用jquery制作弹出框效果
非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title.无按钮) iframe:在对话框中嵌入一个iframe tip:带有小三角指向的小tip dialog:最基础的自定义对话框 var jDialogId = []; (function ($) { $.jDialog = function (o
-
jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下边会有一条横线在滑动.一直想找类似的效果学一下.结果,不是忘记有类似效果的网站的网址,就是压根儿找不到..又不知道怎么描述,今天总算碰到了,真给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-meizu-web-nav-menu-
-
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html
-
jQuery+css+html实现页面遮罩弹出框
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g
-
jQuery实现简单的列表式导航菜单效果代码
本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h
-
jQuery实现仿美橙互联两级导航菜单效果完整实例
本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/