Customizing JavaScript Confirm

Question

Customizing JavaScript Confirm

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Can you customize confirm() via CSS, or how to implement some modal in it? I tried using Bootstrap but the JS code stopped 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");
    }

    });
});

javascript alert

asked by anonymous 19.04.2017 / 15:44

3 answers

Property forChild does not exist on type typeof IonicModule Ionic 2 Problem with tag select in form

score 1 · Answer 1

For confirm , alert or prompt , in addition to line break \r , new line \n and tab \t , you can use Unicode, such as 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 this answer in Stack Overflow

score 0 · Answer 2

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

You can use bootstrap modals or other options with jquery as you mentioned.

score 0 · 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><scriptsrc="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>