jquery 원본 팝업 레이어 접기 효과 접기를 클릭하면 layer_jquery가 팝업됩니다.

WBOY

풀어 주다： 2016-05-16 16:55:41

원래의

1132명이 탐색했습니다.

팝업 레이어 효과는 많은 웹사이트에서 사용됩니다. 오늘은 최근 프로젝트에서 사용된 작은 효과를 정리하겠습니다. 접기를 클릭하면 사용자가 정보를 입력할 수 있습니다. 팝업 레이어 코드는 jq에 의해 동적으로 생성됩니다. 모든 사람의 작성 방법이 다르며 요구 사항도 다릅니다.

html:

코드 복사 코드는 다음과 같습니다.

< ;h1 class ="bm">등록하고 싶습니다

코드 복사 코드는 다음과 같습니다.

 
*{ margin:0;} 
body{ 글꼴:14px 'Microsoft YaHei'; 색상 :#555;} 
li{ list-style:none;} 
.layer_bg{ 위치: 고정; 왼쪽: 0%; ; 배경:#000; 디스플레이:없음;} 
.layer_item; 왼쪽:50%; 너비:-300px; 인라인; 오버플로: 숨김; 배경:#fff; z-index:11;} 
.layer_item .layer_title{ float:left; height:75px; :#FF4E00;} 
.layer_item .layer_title h1{ float:left; 글꼴 크기:35px; color:#fff;} 
.layer_item .layer_title { float:right; 높이: 75px; text-align:center; 색상:#fff; 배경:#535961; >.layer_item ul{ float:left; 너비:10px 0;} 
.layer_item ul{ float:left; line-height:35px 0; 숨겨진;} 
 .layer_item ul li 스팬{ float:left; text-indent:20px; text-align:right; 패딩-오른쪽:10px;} 
.layer_item ul li 스팬 b{ 색상 :Red;} 
.layer_item ul li .layer_txt{ float:left; width:300px; height:23px; line-height:23px; border:1px solid #dfdfdf;} 
.layer_item ul li #message{ 너비: 400px; 높이:150px;} 
.layer_item .layer_btn{ float:left; 너비:100%; padding-bottom:40px;} 
.layer_item .layer_btn .layer_submit_btn{ float:left ; 너비:100px; 텍스트 정렬:가운데; 배경:#fff; 테두리: 없음 ; line-height:40px } 

 

jq:

코드 복사 :

$(function () {
var layer_bg = '

'; //layer_bg
var layer = '

'; //layer_item
layer = '

我要报name

'; //layer_title
layer = '

真实姓name*：

핸드워*：레이어 = '
QQ：

报명인수*：

留言：

'; //layer_cont end
layer = '

';
레이어 = '

'; //layer_item end
$('body').append(layer_bg);
$('body').append(레이어);
var winW = $(window).width();
var winH = $(window).height();
var objH = $('.layer_item').height();
var objW = $('.layer_item').width();
$('.layer_item').css({ '높이': 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 , function () {
$('.layer_bg').fadeOut()
});
});

效果图：