弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息。弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可。
$(function () {
var layer_bg = '
'; //layer_bg
var layer = '
'; //layer_item
layer += '
我要报名
x'; //layer_title
layer += '
'; //layer_cont end
layer += '
';
layer += '
'; //layer_item end
$('body').append(layer_bg);
$('body').append(layer);
var winW = $(window).width();
var winH = $(window).height();
var objH = $('.layer_item').height();
var objW = $('.layer_item').width();
$('.layer_item').css({ 'height': 0 });
$('.bm').click(function () {
$('.layer_bg').css('opacity',0.7).fadeIn();
$('.layer_item').animate({ 'height': objH, 'marginTop': -objH / 2 },500);
});
$('.layer_title a').on('click', function () {
$('.layer_item').animate({ 'height': 0, 'marginTop': 0 }, 200, function () {
$('.layer_bg').fadeOut();
});
});
});