BlockUI 및 jQuery를 사용하여 대화 상자를 효율적으로 작성하십시오.

Question

내 응용 프로그램에 사용되는 환상적인 BlockUI 플러그인을위한 작은 래퍼를 만들어 내 요구 사항을 충족하는 대화 상자를 쉽게 만들 수 있습니다.

가끔은 약간의 jQuery가 지연되고 있으며 열렬한 팬이라면이 특정 작업을 수행하는 방법을 알고 싶습니다.

이 함수는 내 응용 프로그램에 대해 머리글, 중간 및 바닥 글을 사용자 지정합니다. 옵션을 전달하여 HTML을 추가로 작성합니다. 대화 상자를 구성한 다음 BlockUI 플러그인에 삽입합니다.

function blockApp(element, options){ 
    var header = jQuery('<div class="modal-header clearfix"><h2></h2><span><a href="#"></a></span></div>'), 
     center = jQuery('<div class="modal-content"></div>'), 
     footer = jQuery('<div class="modal-footer"></div>'); 

    //Compose dialog 
    var opts = jQuery.extend({}, dialogDefaults, options); 
    header.find('h2').html(opts.title); 
    center.html(jQuery(element).html()); 

    var comp = jQuery('<div></div>').append(header).append(center).append(footer); 

    jQuery('#notificationUI').block(jQuery.extend({}, standardBlock, { 
     message: comp, 
    })); 
    jQuery('.blockOverlay').click(function(){ 
     jQuery('#notificationUI').unblock(); 
    });    
} 

처음에는 wrap() 및 wrapInner()를 사용해 보았습니다.

내 질문은 어떻게 John Resig가이 작업을 수행합니까??

Answer 1

당신이 찾고있는 것이 맞는지는 확실치 않지만 최근에 BlockUI with/jConfirm이라는 다른 jQuery 플러그인을 사용했습니다.이 플러그인은 here에서 다운로드 할 수 있습니다. jConfirm (또는 jAlert 또는 jPrompt)를 사용하면 CSS를 통해 경고 상자를 완전히 사용자 정의 할 수 있습니다. 내 시나리오는 아마 당신과 다르지만 내 앱에서는 사용자가 문서를 변경할 수 있습니다. 그들이 내 변경 사항을 모두 지우기 위해 "취소"버튼을 클릭하면 BlockUI를 사용하여 jConfirm 경고 팝업창이 나타나 인터페이스를 어둡게합니다. 꽤 매끄럽게 보입니다. jQuery를 사용하면 "취소"버튼의 클릭 이벤트를 잡아서 다음과 같이 할 수 있습니다.

$('.cancel').click(function() { 

       $.alerts.dialogClass = 'my_css'; 

       $.blockUI({ message: null }); 

       jConfirm('Are you sure you want to cancel?', 'Cancel Changes?', 

       function (r) { 
        if (r.toString() == 'false') { 
         $.unblockUI(); 
        } else { 
         //close window 
        } 
       }); 

       return false; 

      }); 

희망이 있습니다.