进击的前端（二）

一.点击按钮来弹出窗口，并加上遮罩效果

1、目录结构

2、页面：index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>jQuery点击弹出登录窗口</title>
<script type="text/javascript" src="./resource/jquery-1.8.1.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/55/sjckzedf/lanrenzhijia.css"> -->
<link rel="stylesheet" type="text/css" href="./css/lanrenzhijia.css">
<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>

3、css样式：lanrenzhijia.css

/* ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½?ï¿½ï¿½ï¿½ï¿½Ö®ï¿½ï¿½ www.lanrenzhijia.com */
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
}/* ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½?ï¿½ï¿½ï¿½ï¿½Ö®ï¿½ï¿½ www.lanrenzhijia.com */
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
}
/* ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½?ï¿½ï¿½ï¿½ï¿½Ö®ï¿½ï¿½ www.lanrenzhijia.com */
.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
}
/* ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½ï¿½?ï¿½ï¿½ï¿½ï¿½Ö®ï¿½ï¿½ www.lanrenzhijia.com */

4、页面结果展示

二.前端实现图片压缩上传

canvas插件实现图片前端JS压缩并上传。

进击的前端（二）

猜你喜欢