Customizing the Javascript confirm

Question

Can you personalize the confirm() via CSS, or how to implement some modal in it? I tried to use Bootstrap but the JS code stops working:

$(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");
    }

    });
});

Answer 1

So much for the confirm, alert or prompt, besides line breaking \r, new line \n and tabulation \t, you can use Unicode, for example underlined letters and this whole list of symbols to build something like:

Code:

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

^{Adapted of this answer on Stack Overflow}

Answer 2

It will not be possible to style confirm, Alert, and etc, they use default interface settings according to the platform.

You can use, as commented, the bootstrap modals or other options with jquery.

Answer 3

Bootstrap 3 + jQuery

Proof of concept

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