부트 스트랩 : 순서대로 모달 열기

Question

내 메시지 프롬프트, 오류, 경고 등 플러그인을 구축하려고하는데 메시지 대기열에 넣고 싶습니다.

내가 한 방식은 내 HTML에 단일 모달을 포함하는 것이 었습니다. (이렇게하면 '오류', '경고'또는 JSTL을 사용하여 번역 한 것과 같은 메시지 유형에 표준 이름을 포함시킬 수 있습니다.)

function message(messageText, messageType) { 
    $('#message').text(messageText); 
    $('#messageIcon').removeClass(); 
    if (messageType == messageTypes.ERROR) { 
     $('#messageIcon').addClass("glyphicon glyphicon-remove-circle text-danger"); 
     $('#messageHeader').text($(" " + '#ERROR').text()); 
    } else if (messageType == messageTypes.WARNING) { 
     $('#messageIcon').addClass("glyphicon glyphicon-warning-sign text-warning"); 
     $('#messageHeader').text(" " + $('#WARNING').text()); 
    } else if (messageType == messageTypes.INFO) { 
     $('#messageIcon').addClass("glyphicon glyphicon-info-sign text-primary"); 
     $('#messageHeader').text(" " + $('#INFO').text()); 
    } 
    $('#messageModal').modal(); 
} 

을하지만이 단지는 계속 표시하면서 모달을 변경할 수 있습니다, 그래서 표시되는 마지막 메시지가 발생 : 그것을 사용. 난에 그 함수의 코드를 포장 시도했다 : 나는 단지 모달가 숨겨진 상태에있는 경우 기능을 발사 ...하지만 그래도 문제가 해결되지하는 것이 논리적이라고 생각

$('#messageModal').on('hidden.bs.modal', function (e) { 
    //above code 
} 

. 문제를 해결할 방법이 없나요? 아니면 잘못된 방법으로 해결할 수 있습니까?

Answer 1

jQuery.queue()를 사용하여 대기열에서 메시징을 구현합니다. 더 많은 정보 확인

https://stackoverflow.com/a/3314877/383474 I'v이 수정없이 함수를 잎이 달린 만 큐에 어떤 메시지를 추가하고,

   var messages = $({}); 
       var messageTypes = {ERROR: 'ERROR', WARNING: 'WARNING', INFO: 'INFO'};      
       $.each([ 
        {message: 'message1', type: 'ERROR'}, 
        {message: 'message2', type: 'WARNING'}, 
        {message: 'message3', type: 'INFO'}], 
        function(i, data) 
        { 
         messages.queue('messages', function() 
         { 
          message(data.message, data.type) 
         }); 
        } 
       ); 

       $("<button>", { 
        text: 'show message', 
        click: function() { 
         showNextQueuedMessage() 
        } 
       }).appendTo('body'); 

       function showNextQueuedMessage() 
       { 
        messages.dequeue('messages');       
       }