jqueryオリジナルのポップアップレイヤー折り畳み効果 折り畳みをクリックしてlayer_jqueryをポップアップします

ポップアップ レイヤー効果は多くの Web サイトで使用されています。今日は、ユーザーが情報を入力するために [折りたたむ] をクリックしてレイヤーをポップアップ表示する、最近のプロジェクトで使用されている小さな効果を整理します。ポップアップ レイヤーのコードは jq によって動的に作成されます。記述方法は人それぞれ異なり、ニーズも異なります。自分に合ったものをすべて選択してください。

html:

コードをコピー コードは次のとおりです:

< ;h1 class ="bm">登録したい

コードをコピーします コードは次のとおりです:

*{ margin:0;}
body{ font:14px 'Microsoft YaHei'; 色:#555;}
li{ list-style:none;}
.layer_bg{ 位置:固定; 幅:100%; ; 背景:#000; 表示: なし; 位置: 左: 50%; 表示:インライン; オーバーフロー: 非表示; z-index:11; }
.layer_item; 行の高さ: 75px; :#FF4E00;}
.layer_item .layer_title h1{ float:left; font-weight:normal; font-size:35px; color:#fff;}
.layer_item .layer_title { フロート: 右; 高さ: 75 ピクセル; テキストのサイズ: 60 ピクセル; }
.layer_item ul{ float :left; width:10px 0;}
.layer_item ul li{ float:left; 行の高さ:10px 0;非表示;}
.layer_item ul li spa{ float:left; width:100px; text-align:right:10px;}
.layer_item ul li span{ color :Red;}
.layer_txt{ float:left; width:300px; height:23px; border:1px; }
.layer_item ul li #message{ width: 400px; height:150px;}
.layer_item .layer_btn{ float:left; width:100%; padding-bottom:40px;}
.layer_item .layer_btn .layer_submit_btn{ float:left ; 幅: 100px; テキスト整列: 非表示; 表示: インライン: 14px ; line-height:40px ; }

jq:

コードをコピーします コードは次のとおりです:

$(function () {
varlayer_bg = '

'; //layer_bg
varlayer = '

'; //layer_item
layer = '

我要报名

x

'; //layer_title
layer = '

' //layer_cont
layer = '
• 真实姓名*：
  layer = '
• 手机*：layer = '
• QQ：
' ;
layer = '
• 报名人数*：
';
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({ '高さ': objH, 'marginTop': -objH / 2 },500);
$('.layer_title a').on('click', function () {
$('.layer_item').animate({ 'height': 0, 'marginTop': 0 }, 200 、関数 () {
$('.layer_bg').fadeOut()
});
});


效果图：