login register Sysop! about ME  

2010년 01월 08일 09시 56분 00초,     조회수 : 2313
  제목 : jQuery MODAL 빠르고 편리한 적용 주석설명 소스
SEQ : 1484 글쓴이 : tiger154

작성 포맷 : TEXT 모드, 자동 줄바꿈 사용

jQuery를 사용하면서 여러 플러그인을 접할때 감탄사를 연발한다.
그후 적용을 하려고 하면 기존 html 구조를 깨지 않는 선에서 이를 바로 적용 하려면 커스터 마이징
작업들이 필요하다. 이러면 jQuery 플러그인을 분석하던가 html 구조를 깨야 하는경우가 있다.
Modal 창도 의외로 그런 경우가 있어서 플러그인 사용이 아닌 순수 jQuery를 사용한 
모달창 소스를 주석과 함께 올려봅니다. 

<script type="text/javascript">
   $(function() { // jQueryStart
 
	   //기본 private var 지정 
	   var BackGroundDIV_NAME = "#bgdiv";  //배경으로 깔릴 DIV 이름 지정
	   var ModalDIV_NAME = "#login"; //Modal 창으로 사용될 DIV 이름 지정

    // 오버레이 효과를 낼 div 를 만들어서 body의 끝에 달아둔다. 
   //  z-index 가 중요하다..
    $("body").append( $("<div id='bgdiv'></div>").css(
      {background: '#333333',
      width:'100%',
      height:'100%',
      position:'absolute',
      opacity:'0.6',
      'top':'0',
      'left':'0',
      'z-index':'10',
      'display':'none'
      }
    ));
 
// 텍스트 필드에 focus 이벤트 등록
 
// overay용 bgdiv 를 보여주고 modal 역할을 할 div를 보여준다.
    $("#fts").focus( function() { //기본text 필드에 포커스시 함수 추가
     $(BackGroundDIV_NAME).show("fast"); // Overlay용 Background DIV 빨리보여주고
     $(ModalDIV_NAME).css("z-index","15").show("slow"); // Login DIV Z-index15 설정후 천천히 보여줘라 
     $("#logintext").focus(); //Login text 에 포커스이동
    });
    
	   $(BackGroundDIV_NAME).click(function () {  //MODAL창 활성화 이후 배경 클릭시 OVERLAY and 
MODAL HIDE
      $(ModalDIV_NAME).hide("slow"); //Login DIV hide
	     $(BackGroundDIV_NAME).hide("fast"); //Back DIV hide
    });

    $("#close_btn").click( function() { //Close Button Click Event
     var id_val = $("#logintext").val(); //Logintext입력 내용을 변수에 배분
     $("#fts").val(id_val); //기본 text 필드에 Logintext입력값 배분
     $(ModalDIV_NAME).hide("slow"); //Login DIV hide
     $(BackGroundDIV_NAME).hide("fast"); //Back DIV hide
    });
   } );  // jQueryEnd
  </script>

[http://sapphirez.textcube.com/1] 님의 블로그 에서 글 발췌 및 수정 내용임을 알려드립니다.

  hskim618
  2010-01-11(10:32)
캐릭 이미지
매번 좋은 팁 감사합니다..
그런데 이 글 올리신 분이 작성한 글은 아닌가 봐요?
직접 작성하신 글이면 질문이나 토론을 할 수 있기 때문에 물어봤습니다.

  tiger154
  2010-01-12(10:23)
캐릭 이미지
음 직접 작성한건 아니지만.. 토론은 가능합니다.ㅎ


제목 작성자 날짜 조회
jQuery MODAL 빠르고 편리한 적용 주석설명 소스 (2) tiger154 2010-01-08 2313

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})