jQuery仿Window弹窗插件


jQuery仿Window弹窗插件
jQuery仿Window弹窗插件以及仿Window弹窗等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link href="css/popupwindow.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/popupwindow.min.js"></script>

3. HTML代码

<div class="content">
	<button id="basic-demo_button" class="btn btn-primary">单窗口示例</button>
	<div id="basic-demo" class="example_content">这是一个单窗口示例!</div>
	<button id="demo-2_button1" class="btn btn-danger">多窗口示例</button>
	<div id="demo-2_first" class="example_content">
		<p>这是一个 <b>模态</b> 窗口。</p>
		<p>通过下面的按钮,你可以打开更多的窗口!</p>
		<button id="demo-2_button2" class="btn btn-primary">窗口2</button>
		<button id="demo-2_button3" class="btn btn-primary">窗口3</button>  
	</div>
	<div id="demo-2_second" class="example_content">这是第二个弹出窗口!</div>
	<div id="demo-2_third" class="example_content">这是第三个弹出窗口!</div>
</div>
<script>
	var Demo = (function($, undefined){
$(function(){
	QuickDemo();
	example2();
});
function QuickDemo(){
	$("#basic-demo").PopupWindow({
		autoOpen    : false
	});
	$("#basic-demo_button").on("click", function(event){
		$("#basic-demo").PopupWindow("open");
	});
}
function example2(){
	$("#demo-2_first").PopupWindow({
		title       : "Example 2 - Modal window",
		modal       : true,
		autoOpen    : false,
		height      : 250,
		width       : 400,
		top         : 100,
		left        : 300
	});
	$("#demo-2_second").PopupWindow({
		title       : "Other window",
		modal       : false,
		autoOpen    : false,
		top         : 400,
		left        : 100
	});
	$("#demo-2_third").PopupWindow({
		title       : "Yet another one",
		modal       : false,
		autoOpen    : false,
		top         : 400,
		left        : 600
	});
	$("#demo-2_first").on("close.popupwindow", function(event){
		$("#demo-2_second").PopupWindow("close");
		$("#demo-2_third").PopupWindow("close");
	});
	$("#demo-2_button1").on("click", function(event){
		$("#demo-2_first").PopupWindow("open");
	});
	$("#demo-2_button2").on("click", function(event){
		$("#demo-2_second").PopupWindow("open");
	});
	$("#demo-2_button3").on("click", function(event){
		$("#demo-2_third").PopupWindow("open");
	});
}
})(jQuery);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章