基于Jquery+div+css實(shí)現(xiàn)彈出登錄窗口(代碼超簡(jiǎn)單)
更新時(shí)間：2015年10月27日 11:06:04 投稿：mrr
這篇文章給大家介紹基于jquery div css三者相結(jié)合實(shí)現(xiàn)彈出登錄窗口，實(shí)現(xiàn)大致思路是這樣的：通過(guò)dispaly：none屬性先隱藏在顯示，感興趣的朋友一起看看代碼實(shí)現(xiàn)過(guò)程吧
具體代碼詳情如下所示：
基本思路先隱藏（dispaly：none）再顯示，半透明蒙版層通過(guò)
z-index:9998;
z-index:9999;
值越大越在前面
index.html
<!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點(diǎn)擊彈出登陸窗口</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" media="all">
<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：;">點(diǎn)擊查看效果</a>
</div>
<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript：;" title="關(guān)閉" class="close">×</a>
<h3>登錄 是一種態(tài)度</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>
css文件jiaobenzhijia.css
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;
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
}
/*
以上代碼就是小編給大家分享的基于Jquery+div+css實(shí)現(xiàn)彈出登錄窗口，代碼很簡(jiǎn)單吧，希望對(duì)大家有用。
您可能感興趣的文章:
- jQuery+Ajax用戶登錄功能的實(shí)現(xiàn)
- jquery 彈出登錄窗口實(shí)現(xiàn)代碼
- PHP+jQuery+Ajax實(shí)現(xiàn)用戶登錄與退出
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- 基于jquery ajax 用戶無(wú)刷新登錄方法詳解
- JQuery記住用戶名密碼實(shí)現(xiàn)下次自動(dòng)登錄功能
- 使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼
- javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
- jQuery實(shí)現(xiàn)彈出窗口中切換登錄與注冊(cè)表單
- jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷
相關(guān)文章
jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效代碼分享
這篇文章主要介紹了jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效，一段清新可愛的焦點(diǎn)圖輪播代碼，有需要的小伙伴可以參考下2015-09-09
這篇文章主要介紹了jQuery搜索子元素的方法,實(shí)例分析了children、find等方法的使用技巧,需要的朋友可以參考下2015-02-02
這是一個(gè)加了點(diǎn)淡入淡出效果的頂部tooltip控件，會(huì)自動(dòng)消失,小功能大家參考使用吧2013-12-12
使用Jquery搭建最佳用戶體驗(yàn)的登錄頁(yè)面之記住密碼自動(dòng)登錄功能（含后臺(tái)代碼）
今天將登錄功能徹底完成，加入記住密碼自動(dòng)登錄功能，密碼在客戶端進(jìn)行第一次加密存儲(chǔ)。并修改了一些bug，優(yōu)化js代碼，上一版本太亂了。2011-07-07
jQuery中使用animate自定義動(dòng)畫的方法
這篇文章主要介紹了jQuery中使用animate自定義動(dòng)畫的方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能，實(shí)現(xiàn)非常簡(jiǎn)單，我們直接可以利用jQuery內(nèi)部封裝的拖拽接口即可簡(jiǎn)單實(shí)現(xiàn)在網(wǎng)頁(yè)上拖拽任意元素的功能，感興趣的小伙伴們可以參考一下2015-11-11
本文給大家匯總了一些jQuery常用的方法，都是我們?nèi)粘ｍ?xiàng)目中經(jīng)常會(huì)用到的，附上示例，有需要的小伙伴可以參考下。2016-03-03
SVG(可縮放矢量圖形)是基于可擴(kuò)展標(biāo)記語(yǔ)言（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。2014-11-11
jQuery復(fù)制節(jié)點(diǎn)用法示例(clone方法)
這篇文章主要介紹了jQuery復(fù)制節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了clone方法復(fù)制節(jié)點(diǎn)及appendTo方法追加節(jié)點(diǎn)的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
jQuery中使用data()方法讀取HTML5自定義屬性data-*實(shí)例
如果你使用jQuery類庫(kù)，那么你可以非常愉悅的使用jquery的data()方法存取data-* 自定義屬性，方法允許我們?cè)贒OM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)2014-04-04