jQuery LayerModel弹出层插件拖动弹出层效果



164 653 218



特效描述:弹出层插件 拖动弹出层 弹出层效果,jquery.layermodel.js弹出层插件,拖动弹出层

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="layerModel.css"/>

2. 引入JS

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.layerModel.js"></script>

3. HTML代码

<div id="demo1">
	这是页面本来就存在的内容!<br/>
	通过插件给它show出来!
</div>
<div id="demo4">
	没有遮罩层的弹出效果!
</div>
<div id="demo5">
	无法拖拽的弹出效果!
</div>
<div id="demo6">
	没有头部的弹出效果
	<a href="javascript:$('#demo6').close();">关闭</a>
</div>
<div id="demo7">
	有回调函数弹出效果!
</div>
<div id="demo0">
	初始化完成有回调函数!
</div>
<div id="demo8">
	定时关闭的弹出层<br/>
	<span id="sss">10</span>秒后关闭弹出层!
</div>
<div id="demo9">
	自定义标题的弹出效果!
</div>
<div id="demo10">
	没有关闭按钮的弹出层
	<a href="javascript:$('#demo10').close();">关闭</a>
</div>
<div id="demo11">
	抖动的弹出层
</div>
<div id="demo12">
	自定义位置的弹出层
</div>
<div id="demo13">
	原始模样的弹出层,我本来就这么丑。。。<a href="javascript:$('#demo13').close();">关闭</a>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/story_img.jpg" width="728" height="257" alt="随便找了一张图" />
</div>
<div id="demo14">
	点下面的链接可以自定义关闭层哦!
	<a href="javascript:$('#demo14').close();">关闭</a>
</div>
<div id="demo15">
	<a href="javascript:;" onclick="$('#aaa').hide();$('#bbb').show();">搞乱位置</a><br/>
	<a href="javascript:$('#demo15').fix();">点我修正位置</a>
	<div id="aaa" style='height:100px;width:50px;'>aaa</div>
	<div id="bbb" style='height:300px;width:450px;display:none;'>bbb</div>
</div>
<div id="demo16">
	<a href="javascript:$('#demo16').close();">关闭</a><br/>
	<a href="javascript:;" onclick="$('#demo17').layerModel();">再弹出一个来</a>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/Keyboard.jpg" width="644" height="207" alt="随便找了一张图" />
</div>
<div id="demo17">
	<a href="javascript:$('#demo17').close();">关闭</a><br/>
	<a href="javascript:;" onclick="$('#demo18').layerModel();">再弹出一个来</a>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/story_img.jpg" width="728" height="257" alt="随便找了一张图" />
</div>
<div id="demo18">
	<a href="javascript:$('#demo18').close();">关闭</a><br/>
	<img src="http://ossweb-img.qq.com/images/cf/web201105/story_img.jpg" width="728" height="257" alt="随便找了一张图" />
</div>
<div id="demo19">
	点我外部,可以将我关闭哦!
</div>
<div class="header">
	<div class="header_box">
		<h1 class="logo">layerModel v1.0</h1>
		<h2 class="sub_tit">演示与说明 
			<select>
				<option>测试IE6 Select穿透</option>
			</select>
		</h2>
		<span class="f_r">by : <a href="javascript:;">zhoukun</a></span>
	</div>
</div>
<div class="wrapper">
<h3>弹出页面上存在的Dom元素</h3>
<div class="code_box">
	<pre>
	$("#demo1").layerModel();
	</pre>
	<div class="con_right">
		<p>需要先将HTML结构添加到页面中,然后设置其隐藏(display:none),<br/>然后选中该dom元素调用layerModel方法</p>
		<a href="javascript:void(0)" class="run" id="demoBtn1">运行</a>
	</div>
</div>
<h3>弹出html拼接的dom元素</h3>
<div class="code_box">
	<pre>
	$("&lt;div id='demo2'&gt;这是拼接出来的<br/>html元素!&lt;/div&gt;").layerModel();
	</pre>
	<div class="con_right">
		<p>
			拼接的html至少有一个dom元素包住,直接的文字是不能调用layerModel方法的<br/>
			如:&lt;div&gt;这是弹出层内容,外面要有一个div包裹住&lt;/div&gt;
		</p>
		<a href="javascript:void(0)" class="run" id="demoBtn2">运行</a>
	</div>
</div>
<h3>弹出iframe</h3>
	<div class="code_box">
	<pre>
	$('&lt;iframe width="600px" height="500px;"<br/> scrolling="yes" src="http://www.baidu.com"&gt;<br/>&lt;/iframe&gt;').layerModel();
	</pre>
	<div class="con_right">
		<a href="javascript:void(0)" class="run" id="demoBtn3">运行</a>
	</div>
</div>
<h3>遮罩层</h3>
	<div class="code_box">
	<pre>
	$("#demo4").layerModel({
		locked : false
	});
	</pre>
	<div class="con_right">
		<p><b>locked:</b>该参数为false时,将不显示遮罩层,没有遮罩层的情况下可以方便对页面继续进行操作。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn4">运行</a>
	</div>
</div>
<h3>关闭拖拽</h3>
<div class="code_box">
	<pre>
	$("#demo5").layerModel({
		drag : false
	});
	</pre>
	<div class="con_right">
		<p><b>drag:</b>该参数为false时将关闭拖拽的功能。<br />
		</p>
		<a href="javascript:void(0)" class="run" id="demoBtn5">运行</a>
	</div>
</div>
<h3>没有头部的弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo6").layerModel({"head":false});
	</pre>
	<div class="con_right">
		<p>设置head:false可以弹出不带头部的弹出效果</p>
		<a href="javascript:void(0)" class="run" id="demoBtn6">运行</a>
	</div>
</div>
<h3>弹出层初始化完成回调函数</h3>
<div class="code_box">
	<pre>
	$("#demo0").layerModel({init:function(){
		alert("弹出层初始化完成!");
	}});
	</pre>
	<div class="con_right">
		<a href="javascript:void(0)" class="run" id="demoBtn0">运行</a>
	</div>
</div>
<h3>回调函数</h3>
<div class="code_box">
<pre>
$("#demo7").layerModel({
	close : function(){
		alert("你好,关闭回调事件");
		return true;
	}
});
</pre>
<div class="con_right">
	<p><b>close:</b>设置弹出层关闭后执行的回调函数,必须返回true或false,返回true才会关闭。</p>
	<a href="javascript:void(0)" class="run" id="demoBtn7">运行</a>
</div>
</div>
<h3>自动关闭的弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo8").layerModel({
		timer : 10000
	});
	</pre>
	<div class="con_right">
		<p><b>timer:</b>设置弹出层自定关闭时间,如1*1000代表1秒。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn8">运行</a>
	</div>
</div>
<h3>点击弹出层外部关闭弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo19").layerModel({
		blurClose : true
	});
	</pre>
	<div class="con_right">
		<p><b>blurClose:</b>设置true泽点击弹出层外部可以将其关闭。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn19">运行</a>
	</div>
</div>
<h3>自定义标题</h3>
<div class="code_box">
	<pre>
	$("#demo9").layerModel({
		title : "你是我的小呀小苹果"
	});
	</pre>
	<div class="con_right">
		<p><b>title:</b>自定义弹出层标题。</p>
		<a href="javascript:void(0)" class="run" id="demoBtn9">运行</a>
	</div>
</div>
<h3>没有关闭按钮</h3>
<div class="code_box">
	<pre>
	$("#demo10").layerModel({
		isClose : false
	});
	</pre>
	<div class="con_right">
		<p><b>isClose:</b>设置关闭按钮显示或隐藏</p>
		<a href="javascript:void(0)" class="run" id="demoBtn10">运行</a>
	</div>
</div>
<h3>设置弹出层抖动</h3>
<div class="code_box">
	<pre>
	$("#demo11").layerModel({
		shake : true
	});
	</pre>
	<div class="con_right">
		<p><b>shake:</b>设置弹出层抖动</p>
		<a href="javascript:void(0)" class="run" id="demoBtn11">运行</a>
	</div>
</div>
<h3>组合属性,自定义弹出层的位置</h3>
<div class="code_box">
	<pre>
	$("#demo12").layerModel({
		center : false,
		fixed : false,
		top : 100,
		left : 100
	});
	</pre>
	<div class="con_right">
		<p><b>组合属性:</b>自定义弹出层的位置</p>
		<a href="javascript:void(0)" class="run" id="demoBtn12">运行</a>
	</div>
</div>
<h3>维持原始模样的弹出层</h3>
<div class="code_box">
	<pre>
	$("#demo13").layerModel({
		staySame : false
	});
	</pre>
	<div class="con_right">
		<p><b>staySame:</b>是否维持原始模样,可能是平时用到的比较多的功能之一</p>
		<a href="javascript:void(0)" class="run" id="demoBtn13">运行</a>
	</div>
</div>
<h3>一个页面弹出多个互不影响的层</h3>
<div class="code_box">
	<pre>
		无
	</pre>
	<div class="con_right">
		<a href="javascript:void(0)" class="run" id="demoBtn16">运行</a>
	</div>
</div>
<h3>参数列表</h3>
<table class="param_tb">
	<colgroup>
		<col style="width:120px" />
		<col style="width:140px" />
		<col style="width:90px" />
		<col style="width:610px" />
	</colgroup>
	<thead>
		<tr class="even">
			<th>参数</th>
			<th>参数类型</th>
			<th>默认参数</th>
			<th>参数说明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>center </td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>弹出层是否始终居中</b></p>
				<p>浏览器大小改变居中</p>
				<p>拖动滚动条居中</p>
			</td>
		</tr>
		<tr class="even">
			<td>drag</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>拖拽效果</b></p>
				<p>true:启用拖拽效果。</p>
				<p>false:禁用拖拽效果。</p>
			</td>
		</tr>
		<tr>
			<td>locked</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p><b>是否开启遮罩层</b></p>
				<p>true:开启遮罩。</p>
				<p>false:禁用遮罩。</p>
			</td>
		</tr>
		<tr class="even">
			<td>zIndex</td>
			<td>number</td>
			<td>9999</td>
			<td class="t_l">
				<p>弹出层的层级大小</p>
			</td>
		</tr>
		<tr>
			<td>opacity </td>
			<td>number</td>
			<td>0.5</td>
			<td class="t_l">
				<p><b>背景遮罩透明度 </b></p>
				<p>0:为完全透明</p>
				<p>1:未完全不透明</p>
			</td>
		</tr>
		<tr class="even">
			<td>title </td>
			<td>string</td>
			<td>系统提示</td>
			<td class="t_l">
				<p>弹出层的标题</p>
			</td>
		</tr>
		<tr>
			<td>timer </td>
			<td>Number</td>
			<td>0</td>
			<td class="t_l">
				<p>定时关闭的时间,大于0才会有效</p>
			</td>
		</tr>
		<tr class="even">
			<td>bgColor </td>
			<td>string</td>
			<td>#fffaf6</td>
			<td class="t_l">
				<p>背景遮罩的颜色</p>
			</td>
		</tr>
		<tr>
			<td>width/height</td>
			<td>Number</td>
			<td>0/0</td>
			<td class="t_l">
				<p>设置弹出层的宽度和高度,单位为px,传参时无需带单位,建议少用,一般在样式中指定width最好。</p>
			</td>
		</tr>
		<tr class="even">
			<td>close</td>
			<td>Function</td>
			<td>function(){return true}</td>
			<td class="t_l">
				<p>设置关闭弹出层后执行的回调函数,只有返回false才不会关闭。</p>
			</td>
		</tr>
		<tr>
			<td>left/top</td>
			<td>Number</td>
			<td>350/100</td>
			<td class="t_l">
				<p>设置弹出层的位置,单位为px,传参时无需带单位,要想让其生效,必须设置fixed:false和center:false。如{"fixed":false,"center":false,"left":200,"top":100}</p>
			</td>
		</tr>
		<tr class="even">
			<td>head</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p>是否显示头部title</p>
			</td>
		</tr>
		<tr>
			<td>isClose</td>
			<td>Boolean</td>
			<td>true</td>
			<td class="t_l">
				<p>是否出现关闭按钮</p>
			</td>
		</tr>
		<tr class="even">
			<td>shake</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p>是否出现抖动效果</p>
			</td>
		</tr>
		<tr>
			<td>staySame</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p>是否保持弹出元素原样,也就是没有插件自己装饰的头部和边框,元素本来啥样就弹出啥样。</p>
			</td>
		</tr>
		<tr>
			<td>init</td>
			<td>function</td>
			<td>null</td>
			<td class="t_l">
				<p>初始化弹出层完成后的回调函数!</p>
			</td>
		</tr>
		<tr>
			<td>blurClose</td>
			<td>Boolean</td>
			<td>false</td>
			<td class="t_l">
				<p>是否点击弹出层外部空间可将其关闭。</p>
			</td>
		</tr>
	</tbody>
</table>
<h3>扩展方法或者小提示</h3>
<table class="param_tb">
	<colgroup>
		<col style="width:260px" />
		<col style="width:700px" />
	</colgroup>
	<thead>
		<tr class="even">
			<th>方法名</th>
			<th>使用说明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>close </td>
			<td class="t_l">
				<p><b>调用close方法可关闭弹出的层</b></p>
				<p>如调用$("#aaa").layerModel()弹出了一个层</p>
				<p>那么给弹出层内的某个元素绑定时间onclick="$('#aaa').close();"即可关闭这个层</p>
				<p><a href="javascript:;" onclick="$('#demo14').layerModel();">点我演示下</a></p>
			</td>
		</tr>
		<tr class="even">
			<td>fix</td>
			<td class="t_l">
				<p><b>调用fix方法可手动修正弹出层的位置</b></p>
				<p>如果通过js方法给弹出层追加了元素导致弹出层位置变了,那么调用fix方法可手动修正弹出层的位置</p>
				<p>
					<a href="javascript:;" onclick="$('#demo15').layerModel();">运行看看</a><br/>
				</p>
			</td>
		</tr>
	</tbody>
</table>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动拽动 弹出层拖动 窗口提示框 文字拖动 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到