今天第一次写博客,希望自己写的简单易懂,好分享。为小伙伴们分享。
看了一晚上了,javascript的模态框还是没有搞明白,今天先把jquery如何搞定模态框的步骤写一写,记录一下,只是先告诉一下自己是怎么使用jquery.leanModal,下一步看看源码。
步骤:
1、引入jquery-1.9.1.min 和 jquery.leanModal.min
2、
<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a></center>
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
</form>
</div>
$('#modaltrigger').leanModal({ top: 120, overlay: 0.45, closeButton: ".hidemodal" });
3、就是提交表单的数据。
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Modal Login Window Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
<!-- jQuery plugin leanModal under MIT License http://leanmodal.finelysliced.com.au/ -->
</head>
<body>
<div id="topbar"><a href="http://designshack.net">Back to Design Shack</a></div>
<div id="w">
<div id="content">
<h1>Welcome to the Site!</h1>
<p>Just click the login link below to expand the modal window. This is only a demo so the input form will not load anything, but it is easy to connect into a backend system.</p>
<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a></center>
</div>
</div>
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
<script type="text/javascript">
<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;"><span style="font-size:12px;">
</pre><pre name="code" class="html"><strong>//$(function(){…});jQuery(function($) {…});$(document).ready(function(){…})</strong>前是后是简写 意思是:文档载入完成后执行的函数。 </span></span>
$(function(){
$('#loginform').submit(function(e){
alert($(this).serialize());// 要提交表单数据序列化
return false;//<span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif; color: rgb(51, 51, 51); line-height: 1.5;"> 返回值为false,将阻止表单提交</span>
});
//点击上面的 “modaltrigger”就触发了下面的模态框的事件,并根据“#loginmodal”找到id为loginmodal的div
//top 弹出窗口离顶部的距离,像素为单位,不要加“px”
//overlay 表示覆盖透明度,最大为1,值越大,透明度越深,初始值是0.5
//closeButton 表示 关闭按钮,隐藏模态框-- 为打开窗口的关闭按钮样式
$('#modaltrigger').leanModal({ top: 120, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>
CSS样式:
/** resets **/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body {
background: #f0f0f0 url('images/bg.gif');
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
::selection { background: #a4dcec; }
::-moz-selection { background: #a4dcec; }
::-webkit-selection { background: #a4dcec; }
::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ccc;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #ccc !important;
font-style: italic;
}
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
#topbar {
background: #4f4a41;
padding: 10px 0 10px 0;
text-align: center;
}
#topbar a {
color: #fff;
font-size:1.3em;
line-height: 1.25em;
text-decoration: none;
opacity: 0.5;
font-weight: bold;
}
#topbar a:hover {
opacity: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
p {
display: block;
font-size: 1.35em;
line-height: 1.5em;
margin-bottom: 22px;
}
.center { display: block; text-align: center; }
/** page structure **/
#w {
display: block;
width: 750px;
margin: 0 auto;
padding-top: 30px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.flatbtn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #f3faef;
text-decoration: none;
background-color: #6bb642;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
font-size: 1.2em;
font-weight: bold;
padding: 12px 22px 12px 22px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
color: #fff;
background-color: #73c437;
}
.flatbtn:active {
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
/** custom login button **/
.flatbtn-blu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #edf4f9;
text-decoration: none;
background-color: #4f94cf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
font-size: 1.3em;
font-weight: bold;
padding: 12px 26px 12px 26px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.flatbtn-blu:hover {
color: #fff;
background-color: #519dde;
}
.flatbtn-blu:active {
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
/** modal window styles **/
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
//这个表示loginmodal的CCS样式
#loginmodal {
width: 300px;
padding: 15px 20px;
background: #f3f6fa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
#loginform { /* no default styles */ }
#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }
.txtfield {
display: block;
width: 100%;
padding: 6px 5px;
margin-bottom: 15px;
font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
color: #7988a3;
font-size: 1.4em;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
background-image: -moz-linear-gradient(top, #edf3f9, #fff);
background-image: -ms-linear-gradient(top, #edf3f9, #fff);
background-image: -o-linear-gradient(top, #edf3f9, #fff);
background-image: linear-gradient(top, #edf3f9, #fff);
border: 1px solid;
border-color: #abbce8 #c3cae0 #b9c8ef;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.txtfield:focus {
outline: none;
color: #525864;
border-color: #84c0ee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}
http://www.jq22.com/jquery-info258