28

me gustaría que me ayudaran a darle css a los alert() y a los confirm() de javascript, para que mis mensajes sean algo elegantes, no quiero optar por un modal solo para confirmaciones, así que si alguien supiera como lo realizo se lo agradecería.

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

4
  • Aquí tienes la respuesta a tu pregunta desarrollo-geek.net/tutoriales/javascript/…
    – Deker
    Commented el 28 jul. 2019 a las 17:07
  • Se te agradece la intención de ayuda, pero deberías leer Cómo responder, pues los aportes que son solo enlaces se consideran de baja calidad
    – user128299
    Commented el 28 jul. 2019 a las 17:10
  • Ademas el enlace solo muestra alert-confirm tal cual muestra el navegador.
    – Shassain
    Commented el 28 jul. 2019 a las 19:01
  • Disculpad que me meta dónde no me llaman, pero Aprendiz está equivocado, pues Deker no ha respondido sino comentado y es el lugar apropiado.
    – track3r
    Commented el 23 ene. 2020 a las 16:12

10 respuestas 10

28

Lamentablemente no es posible.

Los alert, prompt y confirm son creados por el navegador y sus estilos visuales dependen enteramente de éste.

Ejemplo de Navegadores:

Chrome

Chrome

Edge

Edge

Firefox

Firefox

Internet Explorer

Internet Explorer

No forman parte del DOM y por lo tanto no se les puede aplicar estilos ni por CSS ni por JavaScript.

Lo único que puedes hacer es precisamente lo que mencionas que no querías: Utilizar un modal de alguna librería de tu preferencia o hacer el código tú mismo.

1
  • 1
    En realidad quiero evitar los modals, bueno gracias por la respuesta, mejor los dejo asi ya nomas
    – Shassain
    Commented el 15 ago. 2017 a las 23:36
9

No es posible aplicar reglas de css para editar los alert() o confirm().

Te recomiendo Bootbox.js, aunque sean modals, son muy fáciles de usar y también tienen la función del 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
        })
    }
});
7

Hay una librería muy buena, AlertifyJS.

Es responsive y usa jQuery, o sea que tiene soporte en casi todos los navegadores viejos. Puedes hacer un confirm bonito y funcional solo con estas líneas de código.

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>

6

Te recomiendo utilizar sweet alert, checa el link: http://t4t5.github.io/sweetalert/

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

}

Ampliando la respuesta, descarga la librería y llama a tu función. Nota: en el link vienen más ejemplos para su uso.

2
  • 1
    Hola leo_vilchis, en lugar de solo dejar un enlace deberías colocar la respuesta aquí directamente. Dejar solo un link sin más explicación no es considerada una buena respuesta en este sitio. Lee la parte que dice Ofrece contexto para los enlaces de ¿Cómo escribo una buena respuesta? Commented el 14 ago. 2017 a las 15:37
  • 1
    Agrega un ejemplo a tu pregunta para que sea una gran aporte, una respuesta de un solo link puede perderse cuando ya no este disponible el servicio
    – jasilva
    Commented el 14 ago. 2017 a las 16:04
4

Puedes usar SweetAlert es muy amigable

$('#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 : Sitio web

3

Puedes utilizar modales para mandar alertas, un modal lo puedes diseñar a tu gusto y se verá igual en todos los navegadores.

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>

3

Mira , si lo que buscas es reemplazar funcionalidad total sobre este método ( Alert() ; confirm () )

Lo que podrías hacer es un override de la función, directamente lo que haces es sobrescribir dicho método.

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

Saludos.

1

lamentablemente no se puede desde el navegador solamente lo puedes simular uno framework que uso yo usualmente para eso es : Alertify JS

aqui esta su documentacion en ingles: alertifyjs

y aqui tienes un ejemplo sencillo:

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

si quieres ver ejemplo mira aqui: ejemplos

1
0

Te recomiendo que utilices el framework de boostrap para que le des tus estilos te dejo un ejemplo:

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

Saludos.

1
  • muchas gracias por la sugerencia, conosco muy bien bootstrap y sus modales, pero en realidad me gustaria darle estilo solo a los confirm de javascript
    – Shassain
    Commented el 14 ago. 2017 a las 3:20
0

Si se puede, pero debes pisar las funciones alert() y confirm(), un ejemplo que hice para jQuery.

Siendo "msg" el mensaje que necesitas y "type" una simple clase que puedes usar para pintar la alerta.

function alert(msg, type){
    var html =  '<div class="alertContainer '+type+'">\n';
    html +=     '   <div class="mensajeAlert">'+msg+'</div>\n';
    html +=     '   <div class="cerrarAlert">x</div>\n';
    html +=     '</div>';
    jQuery('body').append(html);
    window.setTimeout(function(){jQuery('.alertContainer').addClass('active')}, 500);
    jQuery('.cerrarAlert').click(function(){
        jQuery('.alertContainer').removeClass('active');
        window.setTimeout(function(){jQuery('.alertContainer').remove()}, 500);
    });
}

alert('Este es un mensaje de error', 'error');
.alertContainer{
    width:400px;
    height:100px;
    border:10px;
    text-align:center;
    color:#fff;
    font-size:14px;
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-50px;
    padding:30px;
    z-index: 10000;
    border-radius:3px;
    opacity: 0;
    transform: translateY(-50px);
    transition:all ease .3s;
}
.alertContainer.error{
    background:rgb(202, 80, 80);;
}
.alertContainer.warning{
    background:#FB9E57;
}
.alertContainer.info{
    background:#847DA2;
}
.alertContainer .cerrarAlert{
    position: absolute;
    width:20px;
    height:20px;
    border-radius:100px;
    background:#3a3a3a;
    border:2px solid #fff;
    text-align: center;
    line-height: 12px;
    top:-10px;
    right:-10px;
    box-shadow: 0px 0px 10px -2px #333;
    cursor: pointer;
    font-family:'Lato', sans-serif;
}
.alertContainer.active{
    transform: translateY(0px);
    opacity: 1;
}
.alertContainer .mensajeAlert{
    font-size:16px;
    vertical-align: middle;
    display: inline-block;
    font-family:'Lato', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

En el caso de los Confirm es lo mismo, pero agregale un boton, los confirm son de tipo boolean (True o False).

1
  • 1
    ese alert que agregastes en realidad es algo que emulastes , es un div con un z-index mayor a la pagina Commented el 6 feb. 2019 a las 18:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.