php编辑jquery弹出窗,jquery实现一个简单好用的弹出框
自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用。喜欢就拿走吧!
代码:
jquery实现弹出登陆窗口
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);//将显示的窗口隐藏起来
})
})
点击查看效果
×
登录 是一种态度
你必须先登录!
- 用户名:
type="text" id="username" value="lnc" size="20" />
- 密 码:
class="ipt" type="password" id="password" value="***********"
size="20" />
value=" 登 录 " />
底部部分文字显示哦
.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;
}
最终效果图:
php编辑jquery弹出窗,jquery实现一个简单好用的弹出框相关推荐
- 详细介绍附代码:使用jquery,和php文件构建一个简单的在线聊天室,通过ip显示googlemap
最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步. 首先介绍一下相关文件信息和功能 ...
- Bootstrap关闭弹出窗导致另一个弹出窗滚动条消失的解决办法
问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框.这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没 ...
- html自动弹出提示对话框代码,html5简单的手机端弹出对话框确认代码
特效描述:html5手机端 弹出对话框确认.html5手机端弹出对话框 代码结构 1. 引入JS 2. HTML代码 没有传递任何参数(需手动关闭) 弹出一个不带任何按钮,且是警告的框,并且两秒后自动 ...
- delphi gui编辑工具源码_Python 快速构建一个简单的 GUI 应用
点击上方"AirPython",选择"加为星标" 第一时间关注 Python 技术干货! 1. 介绍 Python GUI 常用的 3 种框架是:Tkinter ...
- 打地鼠程序代码C语言,自己用C写的一个简单的打地鼠游戏代码出了个问题(鼠标和循环不能...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 b=0; /*保证上面不出界*/ if(a>getmaxx()-R) a=getmaxx()-R; /*保证右边不出界*/ if(b>getm ...
- c语言控制台数字键打地鼠,自己用C写的一个简单的打地鼠游戏代码出了个问题(鼠标和循环不能...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 b=0; /*保证上面不出界*/ if(a>getmaxx()-R) a=getmaxx()-R; /*保证右边不出界*/ if(b>getm ...
- iPhone上编辑html,在iphone上重新格式化一个简单的html页面
我有一个名为today.html的html,我在我的 iphone上使用它,我必须放大查看我的任务如何才能正确格式化,以便我在iphone上的屏幕上扭曲,文本大小合适 这是我的代码 /p> &q ...
- python编辑游戏脚本_用PYTHON做一个简单的游戏脚本(基础,详细)
引言 这段时间迷上了玩点点点的小游戏,但是某些重复的环节着实无聊,就想着能不能用PYTHON做一个游戏脚本,不过为了熟悉需要做脚本的各个模块,于是打算在4399上找一个比较像的游戏做个脚本练练手,后来 ...
- C语言中怎样编辑混合运算,用C语言编写一个简单的可以进行四则运算混合运算的计算器!...
满意答案 夏x夕 2013.09.06 采纳率:51% 等级:12 已帮助:11673人 scanf("%c",&c[i]); } for(i=0;c[i]!='=' ...
- iOS:弹出窗控制器:UIPopoverController
弹出窗控制器:UIPopoverController 截图: 实质:就是将内容控制器包装成popoverController的形式,然后在模态出来,必须给定指向目标(target.frame). ...
最新文章
- 我对CSS选择器的认识
- MSMQ(MicroSoft Message Queue,微软消息队列)
- 微课|玩转Python轻松过二级(1.5节):安装扩展库
- Servlet HTTP 状态码
- EmbarassedBirds全体开发人员落泪
- 【codevs1380】没有上司的舞会
- 上海市计算机二级vb试题及答案,上海计算机二级VB试题
- 英语学习必备:Eudic欧路词典 for Mac增强版
- 2011年美国大学电子电气工程-通讯工程专业研究生排名
- 变转速数据集 -- 渥太华轴承数据集描述及下载链接
- linux mbr efi 分区吗,几个概念:MBR,GPT,EFI分区,混合分区表,BootCamp
- 案例:使用pre_trained模型进行VGG
- 苹果android系统版本,给Mac装上的Android系统?Remix OS PC版
- 紫光集团或入股武汉新芯 赵伟国将任董事长
- python import文件后 core dumped_python numpy包调用core dumped、Linux VDSO机制
- 010 editor如何复制16进制
- Zeal 面向开发者的离线文档查看工具
- XManager5连接CentOS7
- 360浏览器极速模式自动_浏览器正在为网站带来自动暗模式
- 【转】2007最牛X网站收集,有些网站蛮有意思