1

Tem como personalizar o confirm() via CSS, ou como implementar algum modal no mesmo? Tentei usar o do Bootstrap porém o código JS para de funcionar:

$(function() {
    $(".delete").click(function(){
    var element = $(this);
    var id = element.attr("id");
    var info = 'id=' + id;

    if(confirm("Deseja realmente Deletar cliente id:   " + id)) {
        $.ajax({
            type: "POST",
            url: "/removeClient",
            data: info,
            success: function () {
            }
        });

        $(this).parents("#show").animate({backgroundColor: "#003"}, "slow").animate({opacity: "hide"}, "slow");
    }

    });
});

3 Respostas 3

1

Tanto para o confirm, alert ou prompt, além de quebra de linha \r, nova linha \n e tabulação \t, dá pra usar Unicode, como por exemplo letras sublinhadas e toda esta lista de simbolos para construir algo como:


prompt example

Código:

var balls = '\u25CD'.repeat(24),
    blue = '\u27BF', 
    red = '\u274C', 
    yellow = '\u2728', 
    green = '\u2705',
    arrow = '\u25B8';
    
window.prompt(balls+' \u25C9 '+balls+'\rWhat is your favorite color?\r\t'+arrow+' B\u0332lue '+blue+'\r\t'+arrow+' R\u0332ed '+red+'\r\t'+arrow+' Y\u0332ellow '+yellow+'\r\t'+arrow+' G\u0332reen '+green);

Adaptado desta resposta no Stack Overflow

0

Não vai ser possível estilizar o confirm, alert, e etc, eles usam configurações padrão de interface, de acordo com a plataforma.

Você pode usar, como comentou, os modais do bootstrap ou outras opções com jquery.

0

Bootstrap 3 + jQuery

Prova de conceito

  $(document).ready(function(){

    $('#999').click(function name(e) {


      $("#modal_confirmar_remocao_body").html('<p> Deseja realmente Deletar cliente id:' + e.target.id + '</p>');
      var info= 'id=' + e.target.id
      $("#modal_confirmar_remocao_remover").click(function (e) {
          
        $('#modal_confirmar_remocao').modal('hide');
        
          $.ajax({
            type: "POST",
            url: "/removeClient",
            data: 'info', //
            success: function () {
              
            }
        });

      });
      $('#modal_confirmar_remocao').modal('show');

    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">







<div class="modal fade" id="modal_confirmar_remocao" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Confirmar remoção</h4>
      </div>
      <div class="modal-body" id="modal_confirmar_remocao_body">
        <p>ola</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" id="modal_confirmar_remocao_remover" class="btn btn-danger">Remover</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->






    <div class="container">
      
      <div class="row">
        
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            
            <button type="button" id="999" class="btn btn-default">Remover</button>
           
        </div>
        
      </div>
      
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .