Question

Hola a todos

Alguien que me pueda orientar? Quiero poner estilos en los mensajes que me manda mi función por ejemplo

que me ponga ese mensaje "bonito"

mi funcion es esta

function saveNameBD(id){

    var params ={
            "IP": id,
            "ACT": 'SAVENAME'           
        };

        $.ajax({
            data:   params,  // the sent information
            url:    'save.php', // the server file whc
            type:   'post',
            success:    function (response) { // the result of the call will be processed here

                        document.getElementById("progressbar").style.width = "8%";

                        alert ("Successful!");   ////////este alert es el de la imagen de arriba 
            }
        });

}

como le pongo el estilo en este caso?

Answer 1

Si no te gusta como se lucen las modales de bootstrap y no sabes como editarlas, puedes hacer una tú mismo. Por ejemplo, para hacer una simple ventana modal al estilo Material design:

<div class="modal">
    <section class="head">
        Material design modal
    </section>
    <section class="body">
        <span class="message">
            ¿Desea aprendar el botón que destruirá al mundo?
        </span>
    </section>
    <section class="foot">
        <button data-action="NO">Cancelar</button>
        <button data-action="OK">Aceptar</button>
    </section>
</div>

Fíjate en el atributo data-action. Este atributo nos servirá para saber qué opción escogió el usuario.

CSS

html { box-sizing: border-box; }
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
.modal {
    background-color: #fff;
    box-shadow: 0px 25px 69px rgba(0,0,0,.2),
        0px 10px 25px rgba(0,0,0,.1);
    display: block;
    left: calc((100% - 400px) / 2);
    position: absolute;
    transform: scale(0, 0);
    transition: transform .4s ease;
    top: 60px;
    width: 400px;
}
.modal.visible {
    transform: scale(1, 1);
}
.modal > .head {
    color: #777;
    font-family: 'segoe ui';
    font-size: 20px;
    padding: 18px 10px;
    text-align: center;
}
.modal > .body {
    background-color: #f9f9f9;
    padding: 24px;
}
.modal > .body > .message {
    color: #777;
    display: block;
    font-family: 'segoe ui';
    font-size: 17px;
    text-align: center;
    width: 100%;
}
.modal > .foot {
    padding: 12px 24px;
    text-align: center;
}
.modal > .foot > button {
    border: none;
    background-color: transparent;
    color: #777;
    cursor: pointer;
    font-family: 'segoe ui';
    font-size: 18px;
    padding: 8px;
    text-transform: uppercase;
    transition: color .3s ease;
}
.modal > .foot > button:hover {
    color: #555;
}
.modal > .foot > button:focus {
    outline: none;
}
.modal > .foot > button[data-action="OK"] {
    color: #3498db;
}
.modal > .foot > button[data-action="OK"]:hover {
    color: #1C6BA0;
}

Te fijas que tiene por defecto un transform: scale(0, 0);. Esto sirve para desaparecer totalmente la modal. Además, tiene un transition: transform .4s ease;, lo que hará que al recuperar su tamaño normal lo hará suavemente, dando un efecto agradable. La ventana será visible cuando se agregue la clase visible.

JavaScript

var modalEndWorld = document.querySelector('.modal');

modalEndWorld.addEventListener('click', function(e) {
     if(e.target.tagName === 'BUTTON') {
        var action = e.target.getAttribute('data-action');
         if(action === 'NO') {
             console.log('Destroying the whole world');
         } else {
             console.log('You are a hero!');
         }
         modalEndWorld.classList.remove('visible');
     }
});

En este código solo hacemos que la ventana modal escuche por eventos 'click', esto nos permite determinar sobre qué elemento de la modal se hizo click. Por eso, la condicional if(e.target.tagName === 'BUTTON') evalúa si el click se hizo sobre un botón, si es así, extrae el atributo data-action del elemento Button clickeado. Así obtenemos la acción elegida por el usuario: if(action === 'NO') { ... }.

Resultado:

Puedes ver un demo en Este fiddle

Answer 2

Te recomiendo usar sweetalert la cual te permite cambiar las alertas con diferentes estilos.

puedes buscarlo en google como sweetalert y lo descargas desde github

Saludos

Answer 3

Hola @rach,

las ventanas que se generan en JavaSCript con alert(), confirm() y prompt() tiene siempre el look & feel del nagegador y de la plataforma, ya que es el browser el que las genera.

Ya que estás usando JQuery, podrías usar las "ventanas modales" que tiene, que son un DIV decorado con aspecto de ventana: http://getbootstrap.com/javascript/#modals

En estos DIV, por supuesto, podés cambiar la estética con CSS todo lo que quieras.

Saludos!