He estado trabajando en un ASP.net proyecto que utiliza la medida ‘modal dialogs». Yo uso asustar cita aquí porque entiendo que el ‘diálogo modal» es simplemente un div en mi documento html que se establece a aparecer «por encima» del resto del documento y no es un cuadro de diálogo modal en el verdadero sentido de la palabra.

En muchas partes del sitio web, tengo el código que se parece a esto:

var warning = 'Are you sure you want to do this?';
if (confirm(warning)) {
    //Do something
}
else {
    //Do something else
}

Esto está bien, pero sería bueno hacer el diálogo confirmar que coincida con el estilo del resto de la página.

Sin embargo, ya que no es un verdadero cuadro de diálogo modal, creo que tengo que escribir algo como esto: (yo uso jQuery-UI en este ejemplo)

<div id='modal_dialog'>
    <div class='title'>
    </div>
    <input type='button' value='yes' id='btnYes' />
    <input type='button' value='no' id='btnNo' />
</div>

<script>
function DoSomethingDangerous() {
    var warning = 'Are you sure you want to do this?';
    $('.title').html(warning);
    var dialog = $('#modal_dialog').dialog();
    function Yes() {
        dialog.dialog('close');
        //Do something
    }   
    function No() {
        dialog.dialog('close');
        //Do something else
    }    
    $('#btnYes').click(Yes);
    $('#btnNo').click(No);
}

Es esta una buena manera para lograr lo que quiero, o hay una mejor manera?

5 Comentarios

  1. 46

    Usted puede ser que desee considerar la abstracción de ella en una función como esta:

    function dialog(message, yesCallback, noCallback) {
        $('.title').html(message);
        var dialog = $('#modal_dialog').dialog();
    
        $('#btnYes').click(function() {
            dialog.dialog('close');
            yesCallback();
        });
        $('#btnNo').click(function() {
            dialog.dialog('close');
            noCallback();
        });
    }

    Usted puede utilizarla como este:

    dialog('Are you sure you want to do this?',
        function() {
            //Do something
        },
        function() {
            //Do something else
        }
    );
    • Pero no importa cómo lo hago, voy a tener que definir funciones personalizadas, derecho? No hay ninguna forma para ser capaz de escribir if (confirm('blah?')) como con la incorporada en el confirm función.
    • Que básicamente sólo podría girar hasta que el usuario ha hecho clic en algo. El problema con eso es que deje el JS hilo de hacer cualquier otra cosa mientras está esperando. Usted está probablemente mejor uso de funciones de devolución de llamada.
    • ¿qué acerca de tener su encargo de confirmar la función simplemente devolver VERDADERO o FALSO? luego de manejar por if(customConfirm()){ //do something} else{ //do something else}
    • Pero cuando iba a la función de devolución? Ese es el punto. Estás esperando a que el usuario haga clic en algo. Para detectar que antes de regresar sería necesario para mantener la ejecución en el cuerpo de su función, que sólo se podía hacer por la gira, y eso es una terrible idea.
    • Sería una buena práctica para llamar .off('click') antes de establecer la on click evento para asegurarse de que su diálogo no se desencadena varios eventos al mismo tiempo.
  2. 17

    SweetAlert

    Usted debe echar un vistazo a SweetAlert como una opción para ahorrar algo de trabajo. Es hermoso desde el estado predeterminado y es altamente personalizable.

    Confirmar Ejemplo

    sweetAlert(
      {
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",   
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!"
      }, 
      deleteIt()
    );

    Custom

  3. 2

    Me gustaría utilizar el ejemplo dado en jQuery interfaz de usuario del sitio como una plantilla:

    $( "#modal_dialog" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
                    "Yes": function() {
                        $( this ).dialog( "close" );
                     },
                     "No": function() {
                        $( this ).dialog( "close" );
                     }
                 }
    });
  4. 0

    Otra forma sería utilizando colorbox

    function createConfirm(message, okHandler) {
        var confirm = '<p id="confirmMessage">'+message+'</p><div class="clearfix dropbig">'+
                '<input type="button" id="confirmYes" class="alignleft ui-button ui-widget ui-state-default" value="Yes" />' +
                '<input type="button" id="confirmNo" class="ui-button ui-widget ui-state-default" value="No" /></div>';
    
        $.fn.colorbox({html:confirm, 
            onComplete: function(){
                $("#confirmYes").click(function(){
                    okHandler();
                    $.fn.colorbox.close();
                });
                $("#confirmNo").click(function(){
                    $.fn.colorbox.close();
                });
        }});
    }
    • ¿qué es okHandler aquí, y cómo pasar mientras llamadas
    • Tengo… es una función a llamar cuando él haga clic en Sí… Gracias… débil en las tecnologías de la web…
  5. 0

    JS:

    var confirmBox = '<div class="modal fade confirm-modal">' +
    '<div class="modal-dialog modal-sm" role="document">' +
    '<div class="modal-content">' +
    '<button type="button" class="close m-4 c-pointer" data-dismiss="modal" aria-label="Close">' +
    '<span aria-hidden="true">&times;</span>' +
    '</button>' +
    '<div class="modal-body pb-5"></div>' +
    '<div class="modal-footer pt-3 pb-3">' +
    '<a href="#" class="btn btn-primary yesBtn btn-sm">OK</a>' +
    '<button type="button" class="btn btn-secondary abortBtn btn-sm" data-dismiss="modal">Abbrechen</button>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '</div>';
    var dialog = function(el, text, trueCallback, abortCallback) {
    el.click(function(e) {
    var thisConfirm = $(confirmBox).clone();
    thisConfirm.find('.modal-body').text(text);
    e.preventDefault();
    $('body').append(thisConfirm);
    $(thisConfirm).modal('show');
    if (abortCallback) {
    $(thisConfirm).find('.abortBtn').click(function(e) {
    e.preventDefault();
    abortCallback();
    $(thisConfirm).modal('hide');
    });
    }
    if (trueCallback) {
    $(thisConfirm).find('.yesBtn').click(function(e) {
    e.preventDefault();
    trueCallback();
    $(thisConfirm).modal('hide');
    });
    } else {
    if (el.prop('nodeName') == 'A') {
    $(thisConfirm).find('.yesBtn').attr('href', el.attr('href'));
    }
    if (el.attr('type') == 'submit') {
    $(thisConfirm).find('.yesBtn').click(function(e) {
    e.preventDefault();
    el.off().click();
    });
    }
    }
    $(thisConfirm).on('hidden.bs.modal', function(e) {
    $(this).remove();
    });
    });
    }
    //custom confirm
    $(function() {
    $('[data-confirm]').each(function() {
    dialog($(this), $(this).attr('data-confirm'));
    });
    dialog($('#customCallback'), "dialog with custom callback", function() {
    alert("hi there");
    });
    });

    CSS:

    .test {
    display:block;
    padding: 5p 10px;
    background:orange;
    color:white;
    border-radius:4px;
    margin:0;
    border:0;
    width:150px;
    text-align:center;
    }

    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"/>
    example 1
    <a class="test" href="http://example" data-confirm="do you want really leave the website?">leave website</a><br><br>
    example 2
    <form action="">
    <button class="test" type="submit" data-confirm="send form to delete some files?">delete some files</button>
    </form><br><br>
    example 3
    <span class="test"  id="customCallback">with callback</span>

Dejar respuesta

Please enter your comment!
Please enter your name here