Dialog은 아주 유용한 UI중 하나 입니다.
플러그인 사용방법은 간단하며, 사용자가 우선적으로 인지하기를 원하는 컨텐츠를 화면위에 노출할때 사용됩니다.

TODO

• image, guide, video 타입 개발 예정

HTML

    Preview Dialog
  

Dialog를 동작시키기 위해서는 a태그에 class="pop-up" 을 추가하여야 합니다. (class는 Dialog설정에 따라 변경 가능)
내부에 담길 Content은 a태그의 href="" 속성의 주소를 ajax로 호출 후 응답을 받아서 노출 합니다.

    
팝업 제목
    

      
내용 입력합니다.
    
    

      닫기
    
  

dialog_example.html의 기본 템플릿은 위와 같습니다.

CSS

    .dialog-wrap { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 20; }
    .dialog-overlay {
      width: 100%; height: 100%; position: inherit; top: 0; left: 0;
      background-color: #000; z-index: 21; opacity: 0.2; filter: alpha(opacity=20);
    }
    .dialog {
      min-width: 500px; position: fixed; _position: absolute; top: 50%; left: 50%; z-index: 22; 
      background-color: #FFF; box-shadow: 0 0 6px rgba(0,0,0,0.33); font-size: 18px; 
      border: 3px solid #999; border-radius: 6px; color: #474747;
    }
    .dialog-header { border-bottom: 1px solid #eee; background-color: #fefefe; border-radius: 3px 3px 0 0; }
    .dialog-close {
      width: 18px; height: 18px; position: absolute; top: 8px; right: 8px;
      font-size: 24px; font-weight: bold; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      text-align: center; text-decoration: none; line-height: 16px; color: #000; border: 0; 
      cursor: pointer; background-color: transparent; opacity: 0.2; filter: alpha(opacity=20); z-index: 24;
    }
    .dialog-close:hover { opacity: 0.6; filter: alpha(opacity=60); }
    .dialog-header { margin: 0; padding: 9px; font-size: 16px; font-weight: bold; line-height: 1; }
    .dialog-body { padding: 10px; font-size: 12px; }
    .dialog-body p { width: auto; font-size: 1.1em; line-height: 18px; }
    .dialog-footer { 
      padding: 5px; border-top: 1px solid #eee; background-color: #f6f6f6; 
      text-align: right; border-radius: 0 0 3px 3px; 
    }
	

History

• Dialog 플러그인 제작[박정식 | 2012.06.25]