Jquery는 팝업 레이어 Plug-in_jquery를 구현합니다.

.마스크
{
위치: 고정;
너비: 100%;
높이: 100%;
배경색: 흰색;
오버플로: 스크롤;
필터: 알파(불투명도=50);
-moz-불투명도: 0.5;
불투명도: 0.5;
Z-색인: 20;
오버플로: 자동;
상단: 0px;
오른쪽: 0px;
}

$.fn.xsPop = 기능(옵션) {
        var defaults = {//기본값
              제목: "팝업 창", //창 제목
                너비: 500,
키: 400,
             태그: this, //로드해야 하는 요소 팝업
              닫기: "닫기",
                 mainContent: "body"//Container, 양식을 제출하기 위한 것이지만 제출하면 페이지가 새로 고쳐집니다...
        };
         var options = $.extend(defaults, options); //전달된 매개변수로 재정의
This.each(함수 () {
                    xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //플러그인의 기본 입구
        });
};

//들어오는 데이터에 따라 마스크 레이어를 추가하고 프롬프트 상자를 팝업합니다
함수 xsMain(제목, 너비, 높이, 태그, 닫기, mainContent) {
      var divmask = "";
​​​​ $(mainContent).append(divmask);
          var xsPop1 = " ";
      var allHtml = xsPop1 xsPop2 xsPop3 xsPop5;
​​​​ $(mainContent).append(allHtml);
​​​​ $(tag).show();
​​​​ $(tag).appendTo("#xsPopMain");
//브라우저의 높이와 너비를 구해 후속 판단(높이 초과, 테두리 제한 끌기)
클라이언트 높이 = window.screen.height;
clientWidth = window.screen.width;
If (높이 > clientHeight) {
             높이 = 클라이언트 높이 - 100;
}
If (너비 > clientWidth) {
               너비 = clientWidth - 100;
}
           $("#xsPop").css({
"heigth": 높이 "px",
"너비": 너비 "px",
"margin-top": "-" (높이 / 2) "px",
"margin-left": "-"(너비 / 2) "px"
        });
          $("#xsPopMain").css("height", height - $("#xsPopHead").height());
           xsdrag("#xsPopHead", "#xsPop") //드래그 동작 바인딩
             $("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }) //바인딩 닫기 작업
}

//팝업 레이어 닫기
함수 ClosePop(태그, mainContent) {
​​​​ $(mainContent).append(tag); //저장합니다. 그렇지 않으면 4단계의 $("#xsPop").remove()가 태그를 삭제합니다
          $(tag).hide();
          $(".mask").remove();
          $("#xsPop").remove();
}