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

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

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

複製程式碼

複製程式碼

程式碼如下:

");
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("

Hello, please put content here.

");
});
});
});
$('#transition').click(function (e) {
$("#transition").hide();
$("#mask").hide();
});
});

• thumb

thumb

• thumb


• thumb


• thumb


• thumb


• thumb


• thumb


• thumb

Loading....

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