변경 js 트위터 부트 스트랩 모달에 확인

Question

나는 사용자에게 확인 대화 상자를 표시하여 변수가 전달 된 동작을 확인하는 JavaScript가 있습니다.

그러나 일반 확인 대화 상자를 twitter-bootstrap 모달로 변경해야합니다.

여러 번 시도했는데 많은 게시물을 읽고 트위터 부트 스트랩 워드 프로세서를 읽었지 만 js에 대한 지식이 부족하여 제대로 작동하지 않습니다. 나는 트위터 부트 스트랩 모달의 변수 표시를 고수하고있다.

나는 약간의 조언을 주면서 나를 도울 수 있기를 바라고있다. 여기

내 현재 JS 대화 코드 :

function checkboxUpdated(checkbox, count, label, id) { 

     if (checkbox.checked) { 

      $('#menu_entry_' + id).show(); 

     } else { 

      if (count > 0) { 

       if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) { 

        checkbox.checked = true; 
        return; 

       } 

      } 

      $('#menu_entry_' + id).hide(); 

     } 

    } 

편집 : 나는 다음과 같은 JS를 변환 할 필요가

{% for id, menu_entry, selected, item_count in menu_entries %} 

    <li id="menu_entry_{{ id }}" {% if not selected %}style="display:none;"{% endif %}> 

     <a 

      {% if id == 4 %} 

       href="{% url summary_details %}" 

      {% elif id == 8 %} 

       href="{% url objective_details %}" 

      {% elif id == 12 %} 

       href="{% url leading_employment_details %}" 

      {% elif id == 16 %} 

       href="{% url desired_occupation_details %}" 

      .... 

      {% elif id == 112 %} 

       href="/" 

      {% else %} 

      href="/" 

      {% endif %} 

      onclick="showProgressAnimation();"> 

참고 : 주석의 요청에 따라 #menu_entry_의 코드를 추가 트위터 부트 스트랩 모달 코드로 코드 확인 :

if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) { 

Answer 1

당신 만의 jQuery 플러그인을 작성할 수 있습니다. 먼저 Bootsrap의 모달 구성 요소를 문서에 추가합니다.

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="confirm-label"></h4> 
     </div> 
     <div class="modal-body"> 
     <p class="message"></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default dismiss" data-dismiss="modal"></button> 
     <button type="button" class="btn btn-primary confirm" data-dismiss="modal"></button> 
     </div> 
    </div> 
    </div> 
</div> 

기본적으로 호출 할 때 모달를 표시하고 확인 버튼을 누르거나 dismiss 그렇지 않은 경우 confirm 이벤트를 트리거해야하는 플러그인.

$.fn.confirm = function (options) { 
    var settings = $.extend({}, $.fn.confirm.defaults, options); 

    return this.each(function() { 
    var element = this; 

    $('.modal-title', this).html(settings.title); 
    $('.message', this).html(settings.message); 
    $('.confirm', this).html(settings.confirm); 
    $('.dismiss', this).html(settings.dismiss); 

    $(this).on('click', '.confirm', function (event) { 
     $(element).data('confirm', true); 
    }); 

    $(this).on('hide.bs.modal', function (event) { 
     if ($(this).data('confirm')) { 
     $(this).trigger('confirm', event); 
     $(this).removeData('confirm'); 
     } else { 
     $(this).trigger('dismiss', event); 
     } 

     $(this).off('confirm dismiss'); 
    }); 

    $(this).modal('show'); 
    }); 
}; 

위의 코드를 개선하면 기본 플러그인 설정이 노출됩니다.

$.fn.confirm.defaults = { 
    title: 'Modal title', 
    message: 'One fine body…', 
    confirm: 'OK', 
    dismiss: 'Cancel' 
}; 

사용 예 : http://jsfiddle.net/cdog/4q9t9pk5/ :

$('#confirm').confirm().on({ 
    confirm: function() { 
    console.log('confirm'); 
    }, 
    dismiss: function() { 
    console.log('dismiss'); 
    } 
}); 

여기에 라이브 예제를 참조하십시오.

자신 만의 솔루션을 작성하고 싶지 않은 경우 https://github.com/nakupanda/bootstrap3-dialog과 같은 기존 프로젝트를 사용해보십시오. 네가 찾고있는 것 같아. 문서 및 데모는 http://nakupanda.github.io/bootstrap3-dialog/에서 확인할 수 있습니다.

Answer 2

DEMO

당신은 아래와 같은 기능을 변경하고 싶습니다.

function checkboxUpdated(checkbox, count, label, id) { 
    if (checkbox.checked) { 
     $('#menu_entry_' + id).show(); 
    } else { 
     if (count > 0) { 
      //save data to use later 
      $('#message_p').text('<the-message-to-show-on-the-modal>') 
      .data('elem', '#menu_entry_' + id) 
      .data('chkbox', checkbox); 

      //set modal title 
      $('#title_h4').text('<Modal Title>'); 

      //show modal 
      $('#confirm_modal').modal('show'); 
     } 
    } 
} 

$(document).ready(function() { 
    $('.button-yes').on('click',function() { 
     var checkbox = $('#message_p').data('chkbox'); 
     checkbox.checked = true; 
     $('#confirm_modal').modal('hide'); 
    }); 

    $('#confirm_modal').on('hidden.bs.modal', function() { 
     var elem = $('#message_p').data('elem'); 
     $(elem).hide(); 
    }); 
}); 

참고 : 다음 페이지 (데모 참조) 아래의 이벤트 리스너에 추가 할 모달 마크 업이있다 문의 사항이 있으면 알려 주시기 바랍니다.