이 글에서는 JavaScript
를 사용하여 팝업 창을 작성하는 방법을 공유합니다.
각 팝업창 식별
var x =0;
var idzt = new Array();
var Window = function(config){
ID가 중복되지 않음
idzt[x] = "zhuti"+x; 팝업창 ID
초기화, 매개변수 수신
this.config = {
너비 : config.width || 300, 너비
높이 : config.height || 높이
버튼: config. 버튼 || '', 기본적으로 버튼 없음
title : config.title || 'title', title
content : config.content || 'content', content
isMask : config.isMask == false?false:config .isMask || true, 마스크 여부
isDrag : config.isDrag == false?false:config.isDrag || true, 이동 여부
};
로드 팝업 창
var w = ($(window).width()-this.config.width)/2;
var h = ($(window).height()-this.config.height )/2;
var nr = "
" ;
$("body ").app
end(nr);
팝업 창 제목 로드
var content ="
"+this.config.title+"
×
";
팝업 콘텐츠 로드
var nrh = this.config.height - 75;
content = content+"
"+this.config.content+"< /p>";
로드 버튼
content = content+"
"+this.config. 버튼+"
";
창에 제목, 내용, 버튼 추가
$('#'+idzt[x]).html(content);
마스크 레이어 만들기
if(this.config.isMask)
{
var zz = "
";
$("body") .append(zz);
$("#zz").css('
디스플레이','block');
}
이동 방지를 위한 최대 및 최소 제한 사항 페이지 밖으로 이동
var maxX = $(window).width()-this.config.width;
var maxY = $(window).height( )-this.config.height;
var minX = 0,
minY = 0;
창 이동
if(this.config.isDrag)
{
마우스 이동 팝업 창
$(".title") .bind("mousedown",function(e){
~ ".zhuti").css("
z-색인
",3);
$('#'+idzt[n]).css("z-index",4) ;
=parseInt($('#'+idzt[n] ).css ("left")), 팝업 레이어의 초기 X 좌표
startY =parseInt($('#'+idzt[n]).css("top")), 팝업 레이어의 초기 Y 좌표 팝업 레이어 downX = e.clientX, 마우스를 눌렀을 때 마우스의 X 좌표
double = e.clienty; 마우스를 눌렀을 때 마우스의 Y 좌표
마우스를 바인딩하여 이동
사건 $ ("mousemove"). ", 기능){
🎜> 최대 및 최소 제한
(endX > maxX)
> > > end .empty(); //텍스트 선택 취소
",기능 (){
> $(".close").click(function(){
(); 팝업 창 제거
$('#zz').remove();
위 내용은 JavaScript로 팝업 창을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!