JQuery制作的放大效果的popup對話框(未添加任何jquery plugin)分享

更新時間：2013年04月28日 16:33:09 作者：

分享一個JQuery制作的放大效果的popup對話框（未添加任何jquery plugin）項目中可以根據(jù)自己的需求來寫css，感興趣的朋友可以了解下哈

多的不說了，直奔主題，分享一個放大效果的popup dialog，項目中可以根據(jù)自己的需求來寫css，我打算復用到metro風格的site上去。

看起來動畫效果還是比較cool的，如果加上了處理后的效果更佳：

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<style> 
body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; } 
ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; } 
#transition { 
background:transparent; 
display:none; 
position:absolute; top:50%; left:50%; z-index:50; 
z-index: 10001; 
} 
#content { 
background:#fff; 
border:1px solid #666; 
margin:-50px 0 0 -50px; 
width:100px; height:100px; 
z-index: 10001; 
} 
#mask{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: #000000; 
display: none; 
z-index: 10000; 
} 
.close 
{ 
width:30px; 
height:20px; 
background-color:Red; 
cursor:pointer; 
display:none; 
} 
.closeShow 
{ 
width:30px; 
height:20px; 
margin-left:50px; 
margin-top:-100px; 
background-color:Red; 
cursor:pointer; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('ul li').click(function (e) { 
$("#mask").fadeTo(500, 0.25); 
$("#content").html("<div>Loading....</div>"); 
var $t = $('#transition'), 
to = $(this).offset(); 
var height = $(document).height(); 
var width = $(document).width(); 
$('#content').css({ width: 100, height: 100 }); 
$t.css({ 
top: to.top + 50, 
left: to.left + 50, 
display: 'block' 
}).animate({ 
top: height / 2, 
left: width / 2 
}, 600, function () { 
$(this).animate({ 
top: 125, 
left: 175 
}, 600); 
$('#content').animate({ 
width: width * 0.8, 
height: height * 0.8 
}, 600, function () { 
// open dialog here 
$("#content").html("<div>Hello, please put content here.</div>"); 
}); 
}); 
}); 
$('#transition').click(function (e) { 
$("#transition").hide(); 
$("#mask").hide(); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<ul> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
</ul> 
<div id='mask'></div> 
<div id="transition"><div id="content">Loading....</div></div> 
</form> 
</body> 
</html> 

加入了mask效果，如果不需要可以直接刪掉。

您可能感興趣的文章:

jQuery插件編寫步驟詳解
這篇文章主要介紹了jQuery插件編寫步驟,詳細分析了jQuery實現(xiàn)插件功能的具體步驟與相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jquery實現(xiàn)ajax提交表單信息的簡單方法(推薦)
下面小編就為大家?guī)硪黄猨query實現(xiàn)ajax提交表單信息的簡單方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jQuery實現(xiàn)在下拉列表選擇時獲取json數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實現(xiàn)在下拉列表選擇時獲取json數(shù)據(jù)的方法,主要涉及jQuery中getJSON方法的使用技巧,需要的朋友可以參考下
2015-04-04
淺析jquery的js圖表組件highcharts
本篇文章主要是對jquery的js圖表組件highcharts進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
jQuery上傳插件webupload使用方法
這篇文章主要為大家詳細介紹了Jquery上傳插件webupload的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
jquery?操作DOM的基本用法分享
jquery?操作DOM的基本用法分享，使用jquery的朋友可以參考下，方便以后對dom操作
2012-04-04
jquery實現(xiàn)兩個div中的元素相互拖動的方法分析
這篇文章主要介紹了jquery實現(xiàn)兩個div中的元素相互拖動的方法,結合實例形式分析了jQuery基于鼠標事件響應的頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2020-04-04
概述jQuery的元素篩選
這篇文章主要介紹了jQuery的元素篩選，并舉例進行說明，希望對大家有所幫助
2016-11-11
jquery 年會抽獎程序
最近公司年會，有個流程要抽獎，特寫了個一個簡單的，純jq代碼，發(fā)給大家共享一下
2011-12-12
基于jQuery實現(xiàn)返回頂部實例代碼
這篇文章主要介紹了基于jQuery實現(xiàn)返回頂部實例代碼的相關資料,需要的朋友可以參考下
2016-01-01