Lean Modal模态框的使用
淳于烈
Lean Modal模态框的使用：
详细的使用步骤：
- 添加相关js插件
<script type="text/javascript" src="${basePath}/assets/plugins/jquery/jquery.leanModal.js"></script> - 定义其模态框
<!-- 模态框开始 --> <div id="loginmodal" style="display: none;"> <h1>新增图集</h1> <form id='photosAdd' action="/mine/photos/add" method="post"> <div class="biaoge"> <p> <span>*</span>图集名称： </p> <div class="tjms"> <input type="text" class="txtfield" name="name"> </div> </div> <div class="center"> <input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu" value="确认" tabindex="3"> <input type="button" name="loginbtn" id="cancel" class="flatbtn-blu hidemodal" value="取消" tabindex="3"> </div> </form> <!-- 模态框结束 -->
- 然后调用leanModal
$(function() { $('#modaltrigger').leanModal({ top : 250, overlay : 0.45, closeButton : ".hidemodal" }); $('#modaltrigger').show(); });
为了 研究一下，这个模态框到底是怎么工作我专门一下 leanModal.js
(function ($) {
$.fn.extend({
leanModal: function (options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
}
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function () {
close_modal(modal_id);
});
$(o.closeButton).click(function () {
close_modal(modal_id);
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$('#lean_overlay').css({'display': 'block', opacity: 0});
$('#lean_overlay').fadeTo(200, o.overlay);
$(modal_id).css({
'display': 'block',
'position': 'fixed',
'opacity': 0,
'z-index': 11000,
'left': 50 + '%',
'margin-left': -(modal_width / 2) + "px",
'top': o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({'display': 'none'});
}
}
});
})(jQuery);
1、(function($){..})(jQuery)这是个啥东西？
答：function($){..}是一个匿名函数， 相当于function fun($){..};fun(jQuery)
2、$.extend({...}) 和$.fn.extend({...})的区别？
答：我们可以把jquery形象的理解成一个类，而extend就是给jquery添加了一个静态的方法，直接就能使用。
$.fn.extend({...})就是给jquery添加一个方法，而要使用方法，就必须在新的对象上使用。
在源码中 jQuery.fn = jQuery.prototype={} 是使用了原型。
3、options = $.extend(defaults, options); 是个啥东西？
答：$.extend(defaults,options)
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 那么合并后的结果 result={name:"Jerry",age:21,sex:"Boy"}
这个东西的目的就是 把后面的参数 合并到最前面的参数中，如果后面的参数和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
这个东西的目的就是 把后面的参数 合并到最前面的参数中，如果后面的参数和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
4、return this.each() 主要作用是什么？
答：先return this.each()，后调用each()方法，而each()方法返回jquery对象，所以这样就可以继续链式操作了。
.each是迭代，但是 this 这个得好好的研究一下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>content</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/text_btn_control.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="plugins/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="plugins/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="content">
<div class="container_01">
<h1>耳机名称</h1>
<p>Lola 完全颠覆了传统耳机设计，让您领略以前无法展现的细节，更畅快地享受您的音乐。50mm 定制驱动单元与先进的人体工学设计的结合，从录音棚设备到笔记本电脑、平板电脑和手机，在任何设备上都可以为您带来颠覆性的听觉体验。这款耳机注定不凡——Lola 带您追求音乐新高度。
</p>
<p>Lola 采用了独一无二的多关节头梁，其设计灵感来自经过精密调试的一级方程式赛车悬架系统。既优雅，又舒适。无论是什么形状和大小的头部，它都能紧密贴合。简而言之，这样的贴合度和舒适度是其他耳机绝不可能达到的。这一创新设计在耳朵周围形成了完美的封闭空腔，同时紧密贴合头部，带来强劲的低音响应、完善了隔音效果并减少了声音的流失。</p>
<div class="cover">
<div class="menu">
<ul class="menu_01">
<li class="menu_one"><a>中文名字</a></li>
<li class="menu_two"><a>耳机</a></li>
<li class="menu_one"><a>耳机插头</a></li>
<li class="menu_two"><a>3.5mm插头</a></li>
</ul>
</div>
<div class="menu">
<ul class="menu_01">
<li class="menu_one"><a>中文名字</a></li>
<li class="menu_two"><a>耳机</a></li>
<li class="menu_one"><a>耳机插头</a></li>
<li class="menu_two"><a>3.5mm插头</a></li>
</ul>
</div>
<div class="menu">
<ul class="menu_01">
<li class="menu_one"><a>中文名字</a></li>
<li class="menu_two"><a>耳机</a></li>
<li class="menu_one"><a>耳机插头</a></li>
<li class="menu_two"><a>3.5mm插头</a></li>
</ul>
</div>
</div>
<div class="cover_01">
<ul class="mulu">
<h3>目录</h3>
<li><a>1、概述</a></li>
<li><a>2、基本信息栏</a></li>
<li><a>3、内容</a></li>
<li><a>4、参数</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="container_02">
<div class="neirong">
<div class="shape"></div>
<h2>内容</h2>
<div class="line"></div>
<a href="index.html"class="edit-icon"><img src="images/icon.png">编辑</a>
</div>
<p>从声学上来说，广大用户惊讶于GMP 8.35 D监听耳机所具备的富于动态的低频响应以及在中频和高频部分所具备的整体通透性。这款耳机的低阻抗及高灵敏度的驱动单元能适应最为广泛的各类设备，其中包括混音台以及便携设备。当然，GMP 8.35 D监听耳机还与GMP 8.000系列一样有相同的技术设计标准 ，因此长期的耐用性得到了保证。</p>
</div>
<div class="clearfix"></div>
<div class="container_03">
<div class="neirong">
<div class="shape"></div>
<h2>参考文献</h2>
<div class="line_01"></div>
<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">✚添加参考文献</a></center>
<div id="loginmodal" style="display:none;">
<h1>添加或修改图片</h1>
<div class="biaoge">
<p><span>*</span>文章名：</p>
<input type="text" class="txtfield">
</div>
<div class="biaoge">
<p><span>*</span>URL：</p>
<input type="text" class="txtfield">
</div>
<div class="biaoge">
<p><span>*</span>网站名：</p>
<input type="text" class="txtfield">
</div>
<div class="biaoge">
<p><span>*</span>发表日期：</p>
<input type="text" class="txtfield">
</div>
<div class="biaoge">
<p><span>*</span>引用日期：</p>
<input type="text" class="txtfield">
</div>
<div class="center">
<input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="确认" tabindex="3">
<input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="取消" tabindex="3">
</div>
</div>
<div class="cankaowenmxian">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(e){
return false;
$(center).hide()
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
$('#loginbtn').click(function(e){
$('#modaltrigger').hide()
});
$('#modaltrigger').show();
});
</script>
</body>
</html>
类似资料：