文档章节

jquery点击弹出登陆窗口

mdoo
 mdoo
发布于 2015/11/26 11:25
字数 956
阅读 112
收藏 1
点赞 0
评论 0

<!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>
<style>
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu {
  margin:0;
  padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display:block
}
audio, canvas, video {
  display:inline-block;
*display:inline;
*zoom:1
}
audio:not([controls]) {
display:none
}
table {
  border-collapse:collapse;
  border-spacing:0;
  empty-cells:show
}
ol, ul, menu {
  list-style:none
}
img {
  border:0
}
a:focus {
  outline:none
}
em, i {
  font-style: normal;
}
button, input, select, textarea {
  font-size:100%;
  margin:0;
  vertical-align:-3px;
  outline:none;
}
button, input {
  border:1px solid;
  outline:none;
  line-height:normal;
*overflow:visible
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor:pointer;
  -webkit-appearance:button
}
input[type="search"] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
textarea {
  overflow:auto;
  vertical-align:top
}
::selection {
background:#72d0eb;
color:#fff;
text-shadow:none
}
::-moz-selection {
background:#72d0eb;
color:#fff;
text-shadow:none
}
*[hidden] {
  display:none
}
a {
  color:#0088DB;
  text-decoration:none;
  cursor:pointer
}
a:hover {
  color:#2A5E8E
}
.clearfix:after, .central:after, .widget ul:after, .paging:after, .pagenav:after, .base-tit:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden
}
.clearfix, .central, .widget ul, .paging, .pagenav, .base-tit {
*+height:1%;
}
body, button, input, select, textarea, code {
  font-size:12px;
  font-family:microsoft yahei;
  color: #444;
}
/*window*/


/* input */
.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;
}
.ipt-mini {
  width: 140px;
  padding: 1px 3px;
}
.ipt:focus {
  border-color: #95C8F1;
  box-shadow: 0 0 4px #95C8F1;
}
/* btn */
.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);
}
input.btn {
  height: 29px;
}
.btn:hover {
  border-color:#c6c6c6;
  color:#333;
  background-color:#f8f8f8;
  background:-webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
  background:-moz-linear-gradient(top, #f8f8f8, #f1f1f1);
  background:linear-gradient(top, #f8f8f8, #f1f1f1);
  box-shadow:#ddd 0 1px 1px 0;
}
.btn:active, .btn.btn-active {
  box-shadow:#ddd 0 1px 2px 0 inset;
  border-color:#c6c6c6;
}
.btn:focus {
  border-color:#4d90fe;
  outline:none
}
.btn-primary {
  border-color: #3079ED;
  color: #F3F7FC;
  background-color: #4D90FE;
  background: -webkit-linear-gradient(top, #4D90FE, #4787ED);
  background: -moz-linear-gradient(top, #4D90FE, #4787ED);
  background: linear-gradient(top, #4D90FE, #4787ED);
}
.btn-primary:hover {
  border-color:#2F5BB7;
  color:#fff;
  background-color: #4D90FE;
  background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
  background: -moz-linear-gradient(top, #4D90FE, #357AE8);
  background: linear-gradient(top, #4D90FE, #357AE8);
}
.btn-primary:active, .btn-primary.btn-active {
  box-shadow:#2176D3 0 1px 2px 0 inset;
  border-color: #3079ED;
}
.btn-primary:focus {
  border-color:#4d90fe;
  outline:none
}
.theme-buy {
  margin-top:10%;
  text-align: center;
}
.theme-gobuy, .theme-signin {
  font-size: 15px;
}
.theme-price {
  position: relative;
  bottom: -6px;
  font-family: microsoft yahei, Arial, Helvetica, sans-serif;
  margin-right: 20px;
  font-weight: bold;
  color: #f60;
  line-height: 32px;
  font-size: 24px;
  display: inline-block;
}
.theme-price dfn {
  font-style: normal;
  font-size: 18px;
  margin-right: 2px;
}
.theme-desc {
  padding: 30px;
}
.theme-version {
  padding: 30px;
}
.theme-popover-mask {
  z-index: 9998;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity:0.4;
  filter:alpha(opacity=40);
  display:none
}
.theme-popover {
  z-index:9999;
  position:fixed;
  top:50%;
  left:50%;
  width:660px;
  height:360px;
  margin:-180px 0 0 -330px;
  border-radius:5px;
  border:solid 2px #666;
  background-color:#fff;
  display:none;
  box-shadow: 0 0 10px #666;
}
.theme-poptit {
  border-bottom:1px solid #ddd;
  padding:12px;
  position: relative;
}
.theme-popbod {
  padding:60px 15px;
  color:#444;
  height: 148px;
}
.theme-popbom {
  padding:15px;
  background-color:#f6f6f6;
  border-top:1px solid #ddd;
  border-radius:0 0 5px 5px;
  color:#666
}
.theme-popbom a {
  margin-left:8px
}
.theme-poptit .close {
  float:right;
  color:#999;
  padding:5px;
  margin:-2px -5px -5px;
  font:bold 14px/14px simsun;
  text-shadow:0 1px 0 #ddd
}
.theme-poptit .close:hover {
  color:#444;
}
.btn.theme-reg {
  position: absolute;
  top: 8px;
  left: 43%;
  display: none
}
.inp-gray, .feed-mail-inp {
  border:1px solid #ccc;
  background-color:#fdfdfd;
  width:220px;
  height:16px;
  padding:4px;
  color:#444;
  margin-right:6px
}
.dform {
  padding:80px 60px 40px;
  text-align: center;
}
.dform .ipt_error {
  background-color:#FFFFCC;
  border-color:#FFCC66
}
.dform-tip {
  display:none;
  background-color:#080;
  color:#fff;
  line-height:42px;
  margin-top:10px;
display:;
  font-size: 14px;
}
.dform-tip-errer {
  background-color: #CF301A;
}
.dform-tip a {
  display: inline-block;
  padding: 0 20px;
  margin-left:10px;
  background-color: #FFE924;
  color: #CF301A;
}
.dform-login {
  padding:0;
  height: 270px;
  overflow: hidden;
}
.dform-login iframe {
  height: 470px;
  margin-top: -180px;
}
.theme-signin {
  margin: -50px -20px -50px 90px;
  text-align:left;
  font-size: 14px;
}
.theme-signin h4 {
  color:#999;
  font-weight:100;
  margin-bottom: 20px;
  font-size: 12px;
}
.theme-signin li {
  padding-left: 80px;
  margin-bottom: 15px;
}
.theme-signin li strong {
  float: left;
  margin-left: -80px;
  width: 80px;
  text-align: right;
  line-height: 32px;
}
.theme-signin .btn {
  margin-bottom: 10px;
}
.theme-signin p {
  font-size: 12px;
  color: #999;
}
.theme-desc, .theme-version {
  padding-top: 0
}
</style>

<script src="js/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.theme-login').click(function(){
        $('.theme-popover-mask').fadeIn(100);
        $('.theme-popover').slideDown(200);
    })
    $('.theme-poptit .close').click(function(){
        $('.theme-popover-mask').fadeOut(100);
        $('.theme-popover').slideUp(200);
    })

})
</script>

</head>

<body>
<div class="theme-buy">
<a class="btn btn-primary btn-large theme-login" href="javascript:;">点击查看效果</a>
</div>
<div class="theme-popover">
     <div class="theme-poptit">
          <a href="javascript:;" title="关闭" class="close">×</a>
          <h3>登录 是一种态度</h3>
     </div>
     <div class="theme-popbod dform">
           <form class="theme-signin" name="loginform" action="" method="post">
                <ol>
                     <li><h4>你必须先登录!</h4></li>
                     <li><strong>用户名:</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
                     <li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
                     <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
                </ol>
           </form>
     </div>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
mdoo
粉丝 7
博文 64
码字总数 50967
作品 0
淄博
Jquery easyui tree 模板

Jquery easyui 是不错的开源框架,主页地址是:http://jquery-easyui.wikidot.com/ 在日常工作中,常常会有弹出的树形选择窗口。 导入代码: <link rel="stylesheet" type="text/css" href=...

yuhonglei4025
2010/08/25
0
3
jquery1.9+获取append后的动态元素

jquery 1.9+放弃了live,说是用on代替了! 那么如果我们以前用live来获取jquery动态添加的元素,现在应该用on怎么写呢? 首先: <div id="one"></div> 然后,我使用append的方法: $('#one').a...

Geomen
2013/10/21
0
1
关于“浏览器无法拦截的弹出窗口”、IE、Firefox强制弹出新窗口

大概有很久很久都没有打理这里了,刚朋友问我,如何防止 弹出框被 浏览器屏蔽,我忽然想到了一个万全之策。 一般来说,我们会用 js 弹出窗口: window.open( url ); 这种方案基本被废弃了,因...

叶落花开
2012/10/26
0
1
50个必备的实用jQuery代码段(2)

如何把一个元素放在屏幕的中心位置: jQuery.fn.center = function () {   return this.each(function(){     $(this).css({       position:'absolute',       top, ( $(...

postdep
2014/02/19
0
1
eclipse安装Spket插件

首先需要安装Spket。 网上下载spket-1.6.16.jar破解版(目前最新版本) 1.如果你的JDK在1.6以上,可以直接双击 spket-1.6.16.jar运行安装。 其它,使用命令行方式。(注意:自己切换命令行到...

柒月-小妖精
2013/01/07
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
jquery easyui 弹出消息框

<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" type="text/css" href="/EasyuiDemo/scripts/jquery-easyui-1.1.1/themes/default/easyui.css"> <link rel="s......

一念三千
2012/11/01
0
0
50个必备的实用jQuery代码段.

如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}}); 2. 解决jQuery, prototype共存......

被风遗忘
2012/04/28
0
14
50个jQuery代码段帮你成为更出色的JS开发者

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快...

西门飞
2013/03/18
0
0
jquery中extend用法

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。 jQuery便是一个封装得非常好的类,比...

woaita1314azsls
07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
3分钟前
0
0
《射雕英雄传》书摘

1. 我虽是个飘泊江湖的贫家女子,可不是低三下四、不知自爱之人。你如真心爱我,须当敬我重我。我此生决无别念,就是钢刀架颈,也决意跟定了你。将来……将来如有洞房花烛之日,自然……自能...

k91191
14分钟前
0
0
解决:modal中datePicker 选中时,会触发modal的hidden.bs.modal事件

最近项目中发现了一个bug,具体表现为选中模态框上datepicker组件上的日期时,会触发模态框的关闭事件,导致数据编辑无法正常进行。网上搜索了下,解决方法如下: $('.datepicker').on('hid...

Funcy1122
18分钟前
0
0
matplotlib 绘图 常用设置

中文乱码 from pylab import mplmpl.rcParams['font.sans-serif'] = ['FangSong'] # 指定默认字体mpl.rcParams['axes.unicode_minus'] = False # 解决保存图像是负号'-'显示为方块的...

阿豪boy
33分钟前
0
0
Redis分布式锁的正确实现方式

前言 分布式锁一般有三种实现方式: 1.数据库乐观锁 2.基于Redis的分布式锁; 3.基于Zookeeper的分布式锁。本篇博客将介绍第二种方式,基于Redis实现分布式锁。虽然网上已经有各种介绍Redis...

大海201506
今天
0
0
ClassNotFoundException: javax.el.ELManager

这个是因为tomcat7中的el-api2.2,有些版本太低,建议升级tomcat到8.0,利用el-api3.0就会解决这个问题。

无语年华
今天
0
0
Jvm堆内存的划分结构和优化,垃圾回收详解(详细解答篇)

在JVM中堆空间划分如下图所示 上图中,刻画了Java程序运行时的堆空间,可以简述成如下2条 1.JVM中堆空间可以分成三个大区,新生代、老年代、永久代 2.新生代可以划分为三个区,Eden区,两个幸...

嘻哈开发者
今天
1
0
CentOS 7.4 设置系统字符编码

1.语言变量LANG在 /etc/locale 文件中。 2.可以通过/ect/profile 来修改LC_TYPE 变量的值 添加如下代码 export LC_ALL="zh_CN.GBK" export LANG="zh_CN.GBK" 到profile文件中,变量的可以修改...

qimh
今天
1
0
Kafka相关使用

安装前提,需要有jdk环境,还有zookeeper环境 zookeeper下载地址:https://www.apache.org/dyn/closer.cgi/zookeeper/ zookeeper安装参考:https://www.jianshu.com/p/f7037105db46 kafka的下......

朝如青丝暮成雪
今天
1
0
CentOS7 解决无法使用tab自动补全 tab代码提示

一、前言 对于刚刚开始学习linux的新人来说,linux的一切都显着神秘,只能惊叹于大牛在Linux上行云流水的操作。今天介绍一下在linux中自动补全的功能。 对于新人来说,在不懂得技巧的情况下,...

ziluopao
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部