zmiana js potwierdź do modemu modemu na twitter

Question

Mam trochę JavaScript, który wyświetla okno dialogowe z potwierdzeniem dla użytkownika, aby potwierdzić jego działanie z przekazanymi zmiennymi.

Muszę jednak zmienić zwykłe okno dialogowe potwierdzenia na modulator twitter-bootstrap.

Próbowałem już kilka razy, przeczytałem wiele postów w SO i przeczytałem dokumentację twitter bootstrap, ale nie mogę go uruchomić, ponieważ moja znajomość js nie jest wystarczająco dobra. Utknąłem na wyświetlaniu zmiennych w modalizatorze bootstrap twitter.

Mam nadzieję, że ktoś może mi pomóc, podając mi kilka wskazówek.

Tu jest mój bieżący kod dialogowe 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: Dodano KODEKS #menu_entry_ jak postulowano w komentarzu:

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

pamiętać, że trzeba przekształcić następujące js potwierdź kod do twitter kod startowy modray:

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

Możesz napisać własną wtyczkę jQuery. Najpierw dodaj modalny komponent Bootsrap do twojego dokumentu.

<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> 

Zasadniczo, wtyczka powinna wyświetlić modalne przy wywołaniu i wywołać zdarzenie confirm jeśli przycisk jest wciśnięty lub potwierdzenie dismiss inaczej.

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

Ulepszenie, które możemy wprowadzić do powyższego kodu, ma na celu ujawnienie domyślnych ustawień wtyczek.

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

Przykład użycia:

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

Zobacz na żywo przykład tutaj: http://jsfiddle.net/cdog/4q9t9pk5/.

Jeśli nie chcesz pisać własnego rozwiązania, możesz wypróbować istniejące projekty, takie jak: https://github.com/nakupanda/bootstrap3-dialog. Wygląda na to, czego szukałeś. Dokumenty i wersje demonstracyjne dostępne tutaj: http://nakupanda.github.io/bootstrap3-dialog/.

Answer 2

DEMO

Chcesz zmienić swoją funkcję, jak pokazano poniżej. Potem jest modalne znaczników, aby dodać do strony (zobacz prezentację) i detektorów zdarzeń przedstawionych poniżej:

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(); 
    }); 
}); 

UWAGA: Daj nam znać, jeśli masz jakiekolwiek pytania.