Confirmar la eliminación usando Bootstrap 3 cuadro de modal

Necesito para confirmar la eliminación usando Bootstrap 3 modal box (SÍ/NO). ¿Cómo puedo crear esto?

Código HTML:

<form action="blah" method="POST">
    <button class='btn' type="submit" name="remove_levels" value="delete">
        <span class="fa fa-times"></span> Delete
    </button>
</form>
InformationsquelleAutor Pink Code | 2014-03-25

8 Kommentare

  1. 85

    Usted necesita el modal en el código HTML. Cuando el botón eliminar se pulsa popup modal. También es importante para prevenir el clic del botón de enviar el formulario. Cuando la confirmación se hace clic en el formulario se envíe.

    JS:

    $('button[name="remove_levels"]').on('click', function(e) {
      var $form = $(this).closest('form');
      e.preventDefault();
      $('#confirm').modal({
          backdrop: 'static',
          keyboard: false
      })
      .on('click', '#delete', function(e) {
          $form.trigger('submit');
        });
    });

    HTML:

    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
    <form action="#" method="POST">
      <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
    </form>
    
    <div id="confirm" class="modal hide fade">
      <div class="modal-body">
        Are you sure?
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
      </div>
    </div>

    • Esto funciona muy bien, con uno de los lados nota: Si hago clic en eliminar y, después, Si hago clic en cancelar y, a continuación, haga clic en borrar de nuevo, en mi caso escenario, el presente es enviado 2 veces. Se debe presentar sólo una.
    • debe comprobar que se han incluido e.prevenDefault()
    • Hay un problema aquí. Tome nota de que si usted está usando esto para confirmar eliminar algo con algún tipo de IDENTIFICACIÓN. Lo que sucede es que, si hace clic en «Cancelar», el evento sigue unido a la modal. Si después de hacer clic en otra cosa para eliminar, va a eliminar.
    • para el tema en los comentarios anteriores Pedro señaló. $(‘#confirmar’).unbind() ayuda a separar los eventos adjuntos
    • Comprobar mi respuesta aquí – stackoverflow.com/questions/8982295/… para un componente reutilizable.
    • Si yo no de veces que haga clic en Cancel botón. A continuación, el .one('click', '#delete', function(e) {}) llamar a ninguna de las veces. Si hago clic en el primer 3 veces el botón cancelar, a continuación, haga clic en Delete botón de mi .one({}) ejecuta 4 veces. Por favor consulte.
    • //borrar todos los eventos existentes de diálogo modal como se muestra a continuación antes de abrirlo para evitar eliminar llamado varias veces $(‘#confirmar’).off();

  2. 14

    Puede utilizar Bootbox cuadros de diálogo

    $(document).ready(function() {
    
      $('#btnDelete').click(function() {
        bootbox.confirm("Are you sure want to delete?", function(result) {
          alert("Confirm result: " + result);
        });
      });
    });

    Plunker Demo

    • Tenga cuidado, bootbox puede entrar en conflicto con bootstrap verbos modales. Lo siento por responder a la vieja pregunta, pero acabo de encontrar con este problema.
  3. 8

    Tengo el mismo problema, sólo por hoy. Esta es mi solución (que creo que es mejor y más sencillo):

    <!-- Modal dialog -->
    <div class="modal fade" id="frmPrenotazione" tabindex="-1">
        <!-- CUTTED -->
        <div id="step1" class="modal-footer">
          <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
        </div>
    </div>
    
    <!-- Modal confirm -->
    <div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" id="confirmMessage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
                    <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    Y en mi .js:

    $('#btnDelete').on('click', function(e){
        confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
            //My code to delete
        });
    });
    
    function confirmDialog(message, onConfirm){
        var fClose = function(){
            modal.modal("hide");
        };
        var modal = $("#confirmModal");
        modal.modal("show");
        $("#confirmMessage").empty().append(message);
        $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose);
        $("#confirmCancel").unbind().one("click", fClose);
    }

    Utilizando unbind antes de la one impide que la eliminación de la función se invoca en la próxima apertura del cuadro de diálogo.

    Espero que esta podría ser útil.

    Seguir un ejemplo completo:

    JS:

    var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
          $('#btnDelete').on('click', function(e){
        		confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
        			//My code to delete
              console.log("deleted!");
        		});
        	});
    
            function confirmDialog(message, onConfirm){
        	    var fClose = function(){
        			  modal.modal("hide");
        	    };
        	    var modal = $("#confirmModal");
        	    modal.modal("show");
        	    $("#confirmMessage").empty().append(message);
        	    $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose);
        	    $("#confirmCancel").unbind().one("click", fClose);
            }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <!-- Modal dialog -->
    <div id="frmTest" tabindex="-1">
        <!-- CUTTED -->
          <div id="step1" class="modal-footer">
        <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
      </div>
    </div>
    
      <!-- Modal confirm -->
    <div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body" id="confirmMessage">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
                <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
              </div>
        </div>
      </div>
    </div>

  4. 6

    manera sencilla el uso de verbos modales es con eModal!

    Ex de github:

    1. Enlace eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

    JS:

        var options = {
                message: "The famouse question?",
                title: 'Header title',
                size: 'sm',
                callback: function(result) { result ? doActionTrue(result) :    doActionFalse(); },
                subtitle: 'smaller text header',
                label: "True"   //use the possitive lable as key
                //...
            };
                         
        eModal.confirm(options);

    HTML:

     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

    Sugerencia: puede el cambio de uso de la etiqueta por defecto nombre! { label: ‘Sí’ | ‘True’ o ‘ACEPTAR’ }

  5. 3
    $('.launchConfirm').on('click', function (e) {
        $('#confirm')
            .modal({ backdrop: 'static', keyboard: false })
            .one('click', '#delete', function (e) {
                //delete function
            });
    });

    El VIOLÍN

    Para tu botón:

    <button class='btn btn-danger btn-xs launchConfirm' type="button" name="remove_levels"><span class="fa fa-times"></span> delete</button></td>
    • Esto no es en el contexto de un determinado código. ¿Cómo OP aplicar esto a su código?
  6. 0

    Crear cuadro de diálogo modal en HTML con id=»confirmación» y el uso de la función showConfirmation.

    También recuerde que usted debe a unbind (modal.unbind()) cancelar y el éxito de los botones después de ocultar el cuadro de diálogo modal. Si usted no hace esto, usted obtendrá el doble enlace.
    Por ejemplo: si usted abre el cuadro de diálogo una vez y pulse «Cancelar» y, a continuación, abrir cuadro de diálogo en el segundo tiempo y pulse ‘Aceptar’ 2 ejecuciones de éxito de devolución de llamada.

    showConfirmation = function(title, message, success, cancel) {
        title = title ? title : 'Are you sure?';
        var modal = $("#confirmation");
        modal.find(".modal-title").html(title).end()
            .find(".modal-body").html(message).end()
            .modal({ backdrop: 'static', keyboard: false })
            .on('hidden.bs.modal', function () {
                modal.unbind();
            });
        if (success) {
            modal.one('click', '.modal-footer .btn-primary', success);
        }
        if (cancel) {
            modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
        }
    };
    
    //bind confirmation dialog on delete buttons
    $(document).on("click", ".delete-event, .delete-all-event", function(event){
        event.preventDefault();
        var self = $(this);
        var url = $(this).data('url');
        var success = function(){
            alert('window.location.href=url');
        }
        var cancel = function(){
            alert('Cancel');
        };
        if (self.data('confirmation')) {
            var title = self.data('confirmation-title') ? self.data('confirmation-title') : undefined;
            var message = self.data('confirmation');
            showConfirmation(title, message, success, cancel);
        } else {
            success();
        }
    });

    https://jsfiddle.net/yiiBoy/hne9sp6g/

  7. 0

    Confirmar la eliminación usando Bootstrap 3 cuadro de modal
    Siguiente solución es mejor que bootbox.js, porque

    • Se puede hacer de todo bootbox.js puede hacer;
    • La sintaxis de uso es más sencillo
    • Permite elegantemente controlar el color de su mensaje a través de «error», «advertencia» o «info»
    • Bootbox es 986 líneas de largo, la mía sólo 110 líneas de largo

    digimango.messagebox.js:

    JS:

    const dialogTemplate = '\
        <div class ="modal" id="digimango_messageBox" role="dialog">\
            <div class ="modal-dialog">\
                <div class ="modal-content">\
                    <div class ="modal-body">\
                        <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\
                        <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\
                    </div>\
                    <div class ="modal-footer">\
                        <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\
                        <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\
                    </div>\
                </div>\
            </div>\
        </div>';
    
    
    //See the comment inside function digimango_onOkClick(event) {
    var digimango_numOfDialogsOpened = 0;
    
    
    function messageBox(msg, significance, options, actionConfirmedCallback) {
        if ($('#digimango_MessageBoxContainer').length == 0) {
            var iDiv = document.createElement('div');
            iDiv.id = 'digimango_MessageBoxContainer';
            document.getElementsByTagName('body')[0].appendChild(iDiv);
            $("#digimango_MessageBoxContainer").html(dialogTemplate);
        }
    
        var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText;
    
        if (options == null) {
            okButtonName = 'OK';
            cancelButtonName = null;
            showTextBox = null;
            textBoxDefaultText = null;
        } else {
            okButtonName = options.okButtonName;
            cancelButtonName = options.cancelButtonName;
            showTextBox = options.showTextBox;
            textBoxDefaultText = options.textBoxDefaultText;
        }
    
        if (showTextBox == true) {
            if (textBoxDefaultText == null)
                $('#digimango_messageBoxTextArea').val('');
            else
                $('#digimango_messageBoxTextArea').val(textBoxDefaultText);
    
            $('#digimango_messageBoxTextArea').show();
        }
        else
            $('#digimango_messageBoxTextArea').hide();
    
        if (okButtonName != null)
            $('#digimango_messageBoxOkButton').html(okButtonName);
        else
            $('#digimango_messageBoxOkButton').html('OK');
    
        if (cancelButtonName == null)
            $('#digimango_messageBoxCancelButton').hide();
        else {
            $('#digimango_messageBoxCancelButton').show();
            $('#digimango_messageBoxCancelButton').html(cancelButtonName);
        }
    
        $('#digimango_messageBoxOkButton').unbind('click');
        $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick);
    
        $('#digimango_messageBoxCancelButton').unbind('click');
        $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick);
    
        var content = $("#digimango_messageBoxMessage");
    
        if (significance == 'error')
            content.attr('class', 'text-danger');
        else if (significance == 'warning')
            content.attr('class', 'text-warning');
        else
            content.attr('class', 'text-success');
    
        content.html(msg);
    
        if (digimango_numOfDialogsOpened == 0)
            $("#digimango_messageBox").modal();
    
        digimango_numOfDialogsOpened++;
    }
    
    function digimango_onOkClick(event) {
        //JavaScript's nature is unblocking. So the function call in the following line will not block,
        //thus the last line of this function, which is to hide the dialog, is executed before user
        //clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count
        //how many dialogs is currently showing. If we know there is still a dialog being shown, we do
        //not execute the last line in this function.
        if (typeof (event.data.callback) != 'undefined')
            event.data.callback($('#digimango_messageBoxTextArea').val());
    
        digimango_numOfDialogsOpened--;
    
        if (digimango_numOfDialogsOpened == 0)
            $('#digimango_messageBox').modal('hide');
    }
    
    function digimango_onCancelClick() {
        digimango_numOfDialogsOpened--;
    
        if (digimango_numOfDialogsOpened == 0)
            $('#digimango_messageBox').modal('hide');
    }

    Utilizar digimango.messagebox.js:

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>A useful generic message box</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    
        <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" />
        <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
        <script src="~/Scripts/bootbox.js" type="text/javascript"></script>
    
        <script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script>
    
    
        <script type="text/javascript">
            function testAlert() {
                messageBox('Something went wrong!', 'error');
            }
    
            function testAlertWithCallback() {
                messageBox('Something went wrong!', 'error', null, function () {
                    messageBox('OK clicked.');
                });
            }
    
            function testConfirm() {
                messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () {
                    messageBox('Are you sure you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' });
                });
            }
    
            function testPrompt() {
                messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (userInput) {
                    messageBox('User entered "' + userInput + '".');
                });
            }
    
            function testPromptWithDefault() {
                messageBox('How do you feel now?', 'normal', { showTextBox: true, textBoxDefaultText: 'I am good!' }, function (userInput) {
                    messageBox('User entered "' + userInput + '".');
                });
            }
    
        </script>
    </head>
    
    <body>
        <a href="#" onclick="testAlert();">Test alert</a> <br/>
        <a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br />
        <a href="#" onclick="testConfirm();">Test confirm</a> <br/>
        <a href="#" onclick="testPrompt();">Test prompt</a><br />
        <a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br />
    </body>
    
    </html>

  8. 0
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    https://getbootstrap.com/docs/4.0/components/modal/

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea