изменить js подтвердить твиттер bootstrap modal

Question

У меня есть JavaScript, который отображает диалоговое окно подтверждения пользователю, чтобы подтвердить свое действие с переданными в переменных.

Однако я должен изменить обычный диалог подтверждения на твитер-бутстрап.

Я пробовал несколько раз, прочитал много сообщений SO и прочитал документы для загрузки в twitter, но я не могу заставить его работать, поскольку мои знания js не достаточно хороши. Я зацикливаюсь на отображении переменных в твиттере bootstrap modal.

Я надеюсь, что кто-то может помочь мне, указав мне несколько указателей.

Вот мой текущий код 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(); 

     } 

    } 

EDIT: ДОБАВЛЕНО КОДЕКС #menu_entry_ с просьбой в комментарии:

{% 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();"> 

Заметим, что мне нужно преобразовать следующие JS Подтвердить код для twitter bootstrap код:

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> 

В принципе, плагин должен отображать модальный при вызове и вызвать confirm события, если кнопка подтверждения нажата или dismiss иначе.

$.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' 
}; 

Пример использования:

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

Смотрите живой пример здесь: http://jsfiddle.net/cdog/4q9t9pk5/.

Если вы не хотите писать собственное решение, вы можете попробовать существующие проекты, такие как: 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(); 
    }); 
}); 

Примечания: Дайте нам знать, если у вас есть какие-либо вопросы.