JavaScript로 팝업 창을 작성하는 방법

이 글에서는 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 ").append(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!