jquery implémente une pop-up simple et facile à utiliser box

Maison

interface Web

js tutoriel

jquery implémente une pop-up simple et facile à utiliser box_jquery

May 16, 2016 pm 04:35 PM

jquery 弹出框

J'ai réécrit du code jquery et résumé une boîte pop-up jquery relativement facile à utiliser pour une utilisation future au travail. Prenez-le si vous l'aimez !

Code :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
&lt;head&gt; 
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
&lt;title&gt;jquery实现弹出登陆窗口&lt;/title&gt; 
&lt;script src="./jquery-1.11.1.min.js"&gt;&lt;/script&gt;&lt;!--本地的 一定要引进jquery才有效哦 --&gt; 
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt; 
&lt;script&gt; 
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);//将显示的窗口隐藏起来 
}) 

}) 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;!-- 整个弹出框分为三个主体，一个是关闭的div 一个中间主要显示的div 最后一个就是增加其他内容的div --&gt; 
&lt;body&gt; 
&lt;div&gt; 
&lt;!-- 这就是点击事件的触发，其中 theme-login是可以修改的 --&gt; 
&lt;a class="login btn" href="javascript:;"&gt;点击查看效果&lt;/a&gt; 
&lt;/div&gt; 
&lt;div class="hide-body"&gt; 
&lt;div class="close-window"&gt; 
&lt;!-- 关闭窗口，也就是触发关闭div的事件--&gt; 
&lt;a href="javascript:;" title="关闭" class="close"&gt;×&lt;/a&gt; 
&lt;h3&gt;登录 是一种态度&lt;/h3&gt; 
&lt;/div&gt; 
&lt;!-- 中间主体显示div 可以增加其他的样式--&gt; 
&lt;div class="login-body dform"&gt; 
&lt;form class="signin" name="loginform" action="" method="post"&gt; 
&lt;ol&gt; 
&lt;li&gt;&lt;h4&gt;你必须先登录！&lt;/h4&gt;&lt;/li&gt; 
&lt;li&gt;&lt;label for="username"&gt;用户名：&lt;/label&gt;&lt;input class="ipt" 
type="text" id="username" value="lnc" size="20" /&gt;&lt;/li&gt; 
&lt;li&gt;&lt;label for="password"&gt;密 码：&lt;/label&gt;&lt;input 
class="ipt" type="password" id="password" value="***********" 
size="20" /&gt;&lt;/li&gt; 
&lt;li&gt;&lt;input class="btn btn-primary" type="submit" name="submit" 
value=" 登 录 " /&gt;&lt;/li&gt; 
&lt;/ol&gt; 
&lt;/form&gt; 
&lt;/div&gt; 
&lt;!-- 底部的div --&gt; 
&lt;div class="bottom"&gt; 
&lt;hr&gt; 
&lt;pre&gt;底部部分文字显示哦&lt;/pre&gt; 
&lt;/div&gt; 
&lt;/div&gt; 

&lt;div class="body-color"&gt;&lt;/div&gt; 

&lt;/body&gt; 
&lt;/html&gt; 

&lt;style&gt; 
.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; 
} 
&lt;/style&gt;

Copier après la connexion

Rendu final :

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn