javascript - close - jquery popup window

¿Diálogo de confirmación personalizado en JavaScript?

Question

He estado trabajando en un proyecto de ASP.net que usa "diálogos modales" personalizados. Utilizo citas de miedo aquí porque entiendo que el ''diálogo modal'' es simplemente un div en mi documento html que está configurado para aparecer "arriba" del resto del documento y no es un diálogo modal en el verdadero sentido de la palabra .

En muchas partes del sitio web, tengo un código que se ve así:

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 que el cuadro de diálogo de confirmación coincida con el estilo del resto de la página.

Sin embargo, ya que no es un verdadero diálogo modal, creo que necesito 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 de lograr lo que quiero o hay una mejor manera?

Answer 1

SweetAlert

Debería echar un vistazo a SweetAlert como una opción para guardar 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()
);

Answer 2

Es posible que desee considerar abstraerlo 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();
    });
}

Puedes usarlo así:

dialog(''Are you sure you want to do this?'',
    function() {
        // Do something
    },
    function() {
        // Do something else
    }
);

Answer 3

Otra forma sería usando 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();
            });
    }});
}

Answer 4

Usaría el ejemplo dado en el sitio de jQuery UI como plantilla:

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

Answer 5

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");

    });

});

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

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