Confirmer la suppression dans une modale / boîte de dialogue en utilisant Twitter Bootstrap ?

Question

J'ai un tableau HTML dont les lignes sont liées aux lignes de la base de données. J'aimerais avoir un lien "supprimer la ligne" pour chaque ligne, mais je voudrais confirmer avec l'utilisateur au préalable.

Y a-t-il un moyen de faire cela en utilisant la boîte de dialogue modale de Twitter Bootstrap ?

Answer 1

Recette GET

Pour cette tâche, vous pouvez utiliser les plugins et les extensions bootstrap déjà disponibles. Ou vous pouvez créer votre propre popup de confirmation avec seulement 3 lignes de code. Vérifiez-le.

Disons que nous avons ces liens (note data-href au lieu de href ) ou les boutons pour lesquels nous voulons avoir une confirmation de suppression :

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>

<button class="btn btn-default" data-href="http://stackoverflow.com/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
    Delete record #54
</button>

Ici #confirm-delete pointe vers un div modal popup dans votre HTML. Elle doit comporter un bouton "OK" configuré comme ceci :

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">Delete</a>
            </div>
        </div>
    </div>
</div>

Maintenant, vous n'avez besoin que de ce petit javascript pour rendre une action de suppression confirmable :

$('#confirm-delete').on('show.bs.modal', function(e) {
    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});

Ainsi de suite show.bs.modal bouton de suppression d'événement href est fixé à l'URL avec l'id d'enregistrement correspondant.

Démonstration : http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

---

Recette POST

Je me rends compte que dans certains cas, il peut être nécessaire d'effectuer des requêtes POST ou DELETE plutôt que GET. Cela reste assez simple sans trop de code. Jetez un coup d'oeil à la démo ci-dessous avec cette approche :

// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {

  var $modalDiv = $(e.delegateTarget);
  var id = $(this).data('recordId');

  $modalDiv.addClass('loading');
  $.post('/api/record/' + id).then(function() {
     $modalDiv.modal('hide').removeClass('loading');
  });
});

// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
  var data = $(e.relatedTarget).data();
  $('.title', this).text(data.recordTitle);
  $('.btn-ok', this).data('recordId', data.recordId);
});

// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {

  var $modalDiv = $(e.delegateTarget);
  var id = $(this).data('recordId');

  $modalDiv.addClass('loading');
  setTimeout(function() {
    $modalDiv.modal('hide').removeClass('loading');
  }, 1000);

  // In reality would be something like this
  // $modalDiv.addClass('loading');
  // $.post('/api/record/' + id).then(function() {
  //   $modalDiv.modal('hide').removeClass('loading');
  // });
});

// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
  var data = $(e.relatedTarget).data();
  $('.title', this).text(data.recordTitle);
  $('.btn-ok', this).data('recordId', data.recordId);
});

.modal.loading .modal-content:before {
  content: 'Loading...';
  text-align: center;
  line-height: 155px;
  font-size: 20px;
  background: rgba(0, 0, 0, .8);
  position: absolute;
  top: 55px;
  bottom: 0;
  left: 0;
  right: 0;
  color: #EEE;
  z-index: 1000;
}

<script data-require="jquery@*" data-semver="2.0.3" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="http://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
      </div>
      <div class="modal-body">
        <p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger btn-ok">Delete</button>
      </div>
    </div>
  </div>
</div>
<a href="#" data-record-id="23" data-record-title="The first one" data-toggle="modal" data-target="#confirm-delete">
        Delete "The first one", #23
    </a>
<br />
<button class="btn btn-default" data-record-id="54" data-record-title="Something cool" data-toggle="modal" data-target="#confirm-delete">
  Delete "Something cool", #54
</button>

Démonstration : http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview

---

Bootstrap 2.3

Voici une version originale du code que j'ai réalisé lorsque je répondais à cette question pour la modale Bootstrap 2.3.

$('#modal').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
});

Démo : http://jsfiddle.net/MjmVr/1595/

Answer 2

http://bootboxjs.com/ - dernière version fonctionne avec Bootstrap 3.0.0

L'exemple le plus simple possible :

bootbox.alert("Hello world!"); 

Du site :

La bibliothèque expose trois méthodes conçues pour imiter leurs équivalents natifs JavaScript. Les signatures exactes de ces méthodes sont flexibles car chacune d'entre elles peut prendre divers paramètres pour personnaliser les étiquettes et spécifier les valeurs par défaut, mais elles sont le plus souvent appelées de la manière suivante :

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)

En voici un extrait en action (cliquez sur "Exécuter l'extrait de code" ci-dessous) :

$(function() {
  bootbox.alert("Hello world!");
});

<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

Answer 3

  // ---------------------------------------------------------- Generic Confirm  

  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {

    var confirmModal = 
      $('<div class="modal hide fade">' +    
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +

          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +

          '<div class="modal-footer">' +
            '<a href="#" class="btn" data-dismiss="modal">' + 
              cancelButtonTxt + 
            '</a>' +
            '<a href="#" id="okButton" class="btn btn-primary">' + 
              okButtonTxt + 
            '</a>' +
          '</div>' +
        '</div>');

    confirmModal.find('#okButton').click(function(event) {
      callback();
      confirmModal.modal('hide');
    });

    confirmModal.modal('show');     
  };

  // ---------------------------------------------------------- Confirm Put To Use

  $("i#deleteTransaction").live("click", function(event) {
    // get txn id from current table row
    var id = $(this).data('id');

    var heading = 'Confirm Transaction Delete';
    var question = 'Please confirm that you wish to delete transaction ' + id + '.';
    var cancelButtonTxt = 'Cancel';
    var okButtonTxt = 'Confirm';

    var callback = function() {
      alert('delete confirmed ' + id);
    };

    confirm(heading, question, cancelButtonTxt, okButtonTxt, callback);

  });

Answer 4

Je me rends compte que c'est une très vieille question, mais comme je me suis demandé aujourd'hui une méthode plus efficace pour gérer les modales de bootstrap. J'ai fait quelques recherches et j'ai trouvé quelque chose de mieux que les solutions qui sont montrées ci-dessus, que l'on peut trouver à ce lien :

http://www.petefreitag.com/item/809.cfm

Chargez d'abord le jquery

$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

Ensuite, il suffit de poser toute question/confirmation à href :

<a href="http://stackoverflow.com/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>

De cette façon, la modale de confirmation est beaucoup plus universelle et peut donc être facilement réutilisée sur d'autres parties de votre site Web.

Answer 5

Pour le même genre de cas, j'ai créé un simple plugin jQuery PopConfirm basé sur Twitter Boostrap PopOver au lieu de Modal qui est trop intrusif pour les petites actions comme la suppression d'une ligne.

Vous pouvez jeter un coup d'œil au projet ici : http://ifnot.github.io/PopConfirm