CSS for alert () or confirm () JavaScript

Navigation
18

I would like you to help me to give css to the alert() and the confirm() of javascript, so that my messages are something elegant, I do not want to opt for a modal only for confirmations, so if someone knew how to I realize I would appreciate it. 

$("#confirm").click(function(){
  var bool=confirm("Seguro de eliminar el dato?");
  if(bool){
    alert("se elimino correctamente");
  }else{
    alert("cancelo la solicitud");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="confirm">confirmar eliminacion</button>
    
asked by Shassain 14.08.2017 в 04:53
source

9 answers

21

Unfortunately is not possible .

The alert , prompt and confirm are created by the browser and their visual styles depend entirely on it.

Example of Browsers:

Chrome

Edge

Firefox

Internet Explorer

They are not part of the DOM and therefore can not be applied to styles by CSS or JavaScript.

The only thing you can do is precisely what you mention that you did not want: Use a modal from a library of your choice or make the code yourself .

    
answered by 14.08.2017 / 07:38
source
8

It is not possible to apply css rules to edit the alert() or confirm() .

I recommend Bootbox.js , although they are modals, they are very easy to use and they also have the function to confirm. 

bootbox.confirm({
    title: "Eliminar Datos",
    message: "Seguro de eliminar el dato?.",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancelar'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirmar'
        }
    },
    callback: function (result) {
        bootbox.alert({
            message: 'Resultado: ' + result
        })
    }
});
    
answered by 14.08.2017 в 07:21
4

There is a very good library, AlertifyJS .

It is responsive and uses jQuery, so it has support in almost all old browsers. You can make a nice and functional confirmation only with these lines of code. 

alertify.confirm("This is a confirm dialog.",
  function() {
    alertify.success('Ok');
  },
  function() {
    alertify.error('Cancel');
  }
);
<link href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
    
answered by 23.11.2017 в 05:33
3

I recommend you use sweet alert, check the link: link 

function delete(id){
   swal({
    title: Eliminar,
    text: Deseas Eliminar el registro?,
    showCancelButton: true,
    confirmButtonColor: '#f7505a',
    cancelButtonColor: '#f7505a',
    confirmButtonText: 'OK',
    cancelButtonText: 'NO'

}).then(function() {
    swal'Registro Eliminado';
})

}

Expanding the answer, download the library and call your function. Note: in the link there are more examples for its use.

    
answered by 14.08.2017 в 16:32
3

You can use manners to send alerts, a modal you can design to your liking and it will look the same in all browsers.

  

W3S Modal 

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btnSi = document.getElementById("myBtnSi");
var btnNo = document.getElementById("myBtnNo");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// Get the button that opens the modal
var mensaje = document.getElementById("myMensaje");

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
    mensaje.textContent  = "Seguro de eliminar el dato?";
    btnSi.style.display = "block";
    btnNo.style.display = "block";
}

btnSi.onclick = function() {
    mensaje.textContent  = "se elimino correctamente";
    btnSi.style.display = "none";
    btnNo.style.display = "none";
}

btnNo.onclick = function() {
    mensaje.textContent  = "cancelo la solicitud";
    btnSi.style.display = "none";
    btnNo.style.display = "none";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Eliminar</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="myMensaje"></p>
    <button id="myBtnSi">Aceptar</button>
    <button id="myBtnNo">Cancelar</button>
  </div>

</div>

</body>
</html>
    
answered by 14.08.2017 в 18:35
3

You can use SweetAlert is very friendly 

$('#btnPromt').click(function(){
    swal({
        title: "Seguro que quieres hacer esto?",
          text: "Esta acción ya no se podrá deshacer, Así que piénsalo bien.",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Si, estoy seguro',
          cancelButtonText: "Cancelar"
        });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.8.0/sweetalert2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.8.0/sweetalert2.min.js"></script>
<button id="btnPromt">Mostrar confirmacion</button>

Link: Website

    
answered by 14.02.2018 в 03:37
2

Look, if you're looking to replace total functionality on this method ( Alert() ; confirm () )

What you could do is override the function, directly what you do is overwrite that method. 

function alert(message) { 
    console.info(message);
}

Greetings.

    
answered by 15.07.2018 в 09:54
1

I recommend you use the boostrap framework to give you your styles I leave an example: 

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Greetings.

    
answered by 14.08.2017 в 05:16
1

unfortunately you can not from the browser only you can simulate a framework that I use usually for that is: Alertify JS

here is your documentation in English: alertifyjs

and here is a simple example: 

if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:[{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");

If you want to see an example, look here: examples

    
answered by 15.07.2018 в 05:58
Subtract two dates in c # Abstract class with constructor