jquery弹出登陆效果

今天药忘吃喽~ 2022-08-07 09:51 146阅读 0赞

1、导入jquery.min.js

2、css样式：

ol,li \{  
list-style:none;  
\}  
.close\{  
color:\#0088DB;  
text-decoration:none;  
cursor:pointer  
\}  
.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: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);  
\}  
  
  
  
  
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:focus \{  
border-color:\#4d90fe;  
outline:none  
\}  
  
  
.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-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;  
\}  
  
  
  
.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;  
\}  
  
  
.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;  
\}

3、jsp页面：