Dialog

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

TODO

Title Section

Content Section


Preview Dialog
HTML
    
    Preview Dialog

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


    
    
팝업 제목

    

      
내용 입력합니다.

상단 HTML의 버튼 클릭시 dialog_example.html를 호출하는 예제 처럼,
ajax로 호출되는 뷰페이지의 기본 템플릿은 위와 같이 작성하면 됩니다.

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; 
    }
Javascript
    /** =======================================================
     * RFC Dialog Plugin - 2012.06.25
     *
     * @Author Park Jeong Shik (dodortus@gmail.com)
     * @Copyright © 2012 RSUPPORT. CO, LTD. All rights Reserved.
     *
     * @Required jQuery
     * ======================================================== */
    
    ;(function($, win, doc){    
      var $dialogWrap = $('.dialog-wrap')
        , $dialog;
      
      $.fn.dialog = $.dialog = function() {
        this.click(function() {
          $.get(this.href, function(res) {
            (!$dialogWrap.length) && $.dialog.create();
            
            $dialogWrap.show().find('.dialog-content').html(res);
            $.dialog.center();
          });
          return false;
        });
      }
      
      $.dialog.create = function() {
        $dialogWrap = $([
          '
',
            '
',
            '
',
              '',
              '
',
            '
',
          '
'
        ].join('\n')).appendTo('body');
      }
    
      $.dialog.center = function() {
        $dialog = $dialogWrap.find('.dialog');
        $dialog.css({
          left: ($(win).width()- $dialog.width()) / 2
        });
      }
    
      $.dialog.close = function() {
        ($.browser.msie) ? $dialogWrap.hide() : $dialogWrap.fadeOut(100);
      }
    
      $('.dialog-wrap .close').live('click', function() {
        $.dialog.close();
      });
    
      $(win).resize(function() { 
        if($dialogWrap.css('display') == 'block') {
          $.dialog.center();
        }
      });
      
      // ESC keydown dialog Close 
      $(doc).keydown(function(e) {
        if($dialogWrap.css('display') == 'block') {
          (e.keyCode == 27) && $.dialog.close();
        }
      });
      
      // USE dialog
      $('.pop-up').dialog();
    })(jQuery, this, document);
History