jquery 팝업 로그인 창 구현 code_jquery-JS 튜토리얼-php.cn

메인 레이어는 왼쪽과 오른쪽의 중심에 있습니다. 창의 너비를 2로 나눈 값에서 자체 레이어의 너비를 2로 나눈 값과 동일하게 왼쪽을 설정합니다. 고정 상단은 숨겨진 스크롤 막대의 스크롤 상단에 50px를 더한 값입니다.

이벤트가 이 클래스를 트리거하면 먼저 두 레이어가 본문에 추가되었는지 확인합니다. 그렇지 않으면 트리거될 때마다 계속 증가합니다. . 5개의 매개변수 title, content, width, height, cssName이 설정되어 있으며 각각 레이어 제목의 스타일 이름, 레이어 내 콘텐츠, 레이어 너비, 레이어 높이, 레이어 콘텐츠를 정의합니다. 레이어의 콘텐츠는 url, text, id, iframe의 4가지 로딩 방식으로 설정되며, get이나 post를 통해 ajax를 통해 타겟 url의 HTML 콘텐츠를 로딩하고, id를 직접 이벤트에 작성합니다. 페이지의 ID를 얻는 것입니다. 내부의 html이 팝업 레이어에 표시되고 iframe은 대상 URL이 레이어의 프레임에 표시된다는 것을 알고 있습니다. 팝업 레이어의 콘텐츠 스타일도 다양한 경우가 많으므로 cssName 매개변수를 추가하여 레이어의 콘텐츠를 정렬할 수 있습니다.

1. 팝업 레이어의 html은 다음과 같습니다.

코드를 복사하세요

title

닫기

content

< /div>

해당 스타일은 다음과 같습니다.

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

#floatBoxBg {
display:none;
width:100%
height:100%; 000;
위치:절대;
왼쪽:0;
}
.floatBox {
테두리:#0C7FDA 5px 솔리드;
위치:절대;
위쪽:40%;
z-index:1000
}
.floatBox .title {
높이:23px;
padding:7px 10px 0;
color:#fff;
배경 첨부:
배경 이미지:url(../images/dialog_bg.gif); 반복: 반복-x;
배경 -위치: 0px 0px;
.floatBox .title h4 {
float:left
여백:0;
글꼴 크기:14px;
줄 높이:16px;
.floatBox .title 스팬 {
커서:포인터
세로 align:middle;
margin-bottom
}
.floatBox .content {
padding:20px 15px; >
두 번째, 팝업창 js 파일은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

// 자바스크립트 문서

varDialogFirst=true;
함수 대화 상자(제목, 내용, 너비, 높이, cssName){

if(dialogFirst==true){
var temp_float=new String;
temp_float="

";
temp_float ="

";
$("body").append(temp_float);
dialogFirst=false;
}

$("#floatBox .title 범위").click(function(){
$("#floatBoxBg").animate({불투명도:"0"},"normal ",function(){$(this).hide();});
$("#floatBox").animate({top:($(document).scrollTop()-(height=="auto "?300:parseInt(height))) "px"},"normal",function(){$(this).hide();});
});

$("#floatBox .title h4").html(title);
contentType=content.substring(0,content.indexOf(":"));
content=content.substring(content.indexOf(":") 1,content.length);
switch(contentType){
case "url":
var content_array=content.split("?");
$("#floatBox .content").ajaxStart(function(){
$(this).html("loading...");
});
$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#floatBox .content").html("오류...");
},
success:function(html){
$("#floatBox .content").html( html)
}
});
휴식;
대소문자 "텍스트":
$("#floatBox .content").html(content);
휴식;
케이스 "id":
$("#floatBox .content").html($("#" content "").html());
휴식;
케이스 "iframe":
$("#floatBox .content").html("");
}

$("#floatBoxBg").show();
$("#floatBoxBg").animate({opacity:"0.5"},"normal");
$("#floatBox").attr("class","floatBox " cssName);
$("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2)) "px",top :($(document).scrollTop()-(height=="auto"?300:parseInt(height))) "px",width:width,height:height});
$("#floatBox").animate({top:($(document).scrollTop() 50) "px"},"normal");
}

삼,参数说明

顺序	参数	功能	备注
1	title	弹出层的标题	必填，纯文本
2	content	弹出层的内容	:url	get或post某一页面里的html，该页面要求只包含body的子标签
			:text	直接写入内容
			:id	显示页面里某id的子标签
			:iframe	层内内容以框架显示
3	width	弹出层的宽	必填，css值，比如“200px”
4	height	弹出层的高	如上，但是可用“auto”
5	cssName	弹出层的css	给id floatBox加入的样式名，层内样式可以通过这个样式名来定制