Sexy Alert Box 1.2 mootools & jQuery

View this post in Español


Sexy Alert Box is a “sexy” clon of classic javascript alert. With a taste to lightbox, it changes the ugly alerts of windows for more attractive alerts!.

sexyalertbox12

Features:

  • Style: Show error messages in a more beautiful way.
  • Compatibility: It’s compatible with modern browsers and Internet Explorer too.
  • Requires: Mootools 1.2 or up
  • Requires: jQuery 1.3 or up

6, 7, 8
3.0, 3.5
9.64, 10
3
4

Demo

You can see a functional demo in the following link: See demo.

Setup

Upload every files of SexyAlertBox to your server (images, css and javascript). If you upload the images folder in a different path don’t forget to change the image path’s in the css file.

For MooTools paste the next code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.moo.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>

For jQuery paste the next code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.jquery.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>

How to use?

The Use of sexyalertbox is easy!

Sexy.alert('Hello world!');

For more personalized alert, you can use the second parameter:

Sexy.confirm('Hello world!', {
  textBoxBtnOk: 'Quiero Entrar',
  textBoxBtnCancel: 'Quiero Salir'
});

Remember you can use html code in the alert message.
Read the doc to see every available options.

Documentation

Public functions:

  • alert

    @param string msg
    @param array properties

    Shows a message with an alert icon.

  • info

    @param string msg
    @param array properties

    Shows an alert with an information icon.

  • confirm

    @param string msg
    @param array properties

    Shows an alert with icon question with two buttons, “OK” and “Cancel”. The onComplete event returns true if the “OK” button was clicked or false if the “cancel” button is clicked.

  • prompt

    @param string msg
    @param string default
    @param array properties

    Shows an alert with a text box where the user can write content. Also shows two buttons, “OK” and “Cancel”.

    The second parameter is the default parameter for the text box in which the user can modify content.

    The onComplet event returns the entered value if the button “OK” was pressed or false if cancel was pulsed. You can change the property “password=true” if you want to show a box with asterisks. Example:

    Sexy.prompt('Enter your password.','default' ,{password: true}); 

Events

Events for the following functions: alert, confirm, prompt, info, error:

  • onComplete

    Throws an event when the user press any alert button, returns the value of the button pressed.

    Sexy.prompt('Enter your name.','Eduardo' , {
      onComplete:
        function(returnvalue) {
          alert (returnvalue);
        }
      });
    Sexy.confirm('Continue?', {
      onComplete:
        function(returnvalue) {
          if (returnvalue) {
            alert ('pressed OK');
          } else {
            alert('pressed Cancel');
          }
        }
      });

License

The script was released under the MIT License.

Questions?

Don’t worry! Don’t kill yourself (yet), you can ask any questions in the coders forum specially created for Sexy Alert Box.

¿How much?

Nothing. But you can collaborate, buying me a coffee :roll: .

Download

Changelog

SexyAlertBox 1.2.2 - Mayo 25, 2009
* Updated for MooTools 1.2.2

SexyAlertBox 1.2.1 - Febrero 27, 2009
* Bug en jQuery, Selects no se ponían visibles

SexyAlertBox 1.2.0 - Febrero 09, 2009
* Dar foco a los botones
* Tecla ESC cierra el alerta
* Ocultar flash
* Reescrito desde 0 para jQuery

SexyAlertBox 1.1.0 - Septiembre 08, 2008
* Pre-Cargar imágenes del Skin, antes de mostrar el alerta
* Ocultar Selects, y elementos flash en IE6

SexyAlertBox 1.0.0 - Agosto 12, 2008
* 100% Compatible con Mootools 1.2.
* Chain Implemented (Cola de mensajes).
* Agregado mas estilos y soporte para prompt con contraseña.
* Arreglada la ejecución de eventos.
desbest says:

Can you please make a new version where people can put custom html in the alerts, such as a form. And then the form values can be returned in a callback function (callback means a response).

dhamaso says:
function chekadatos(nombre){
    if(!nombre){
    Sexy.error('<h1>dhamasito dice: </h1><p>Introduzca su nombre, porfavor</p>');

<strong>    $('#name').focus();</strong>
    return false;
    }

alguien sabe como hacer eso despues de que se mande el alertbox?

si no me entendieron mi pregunta es:
¿Como mandar el foco a una caja de texto despues de mandar un mensaje de error con el SexyAlert?

si saben porfavor respondan para saber si se puede o no, no soy muy bueno programando XD.

Kevin says:

I’e been using your sexy aler box and I really love it. Though it has one little flaw. At line 312 you have

$('#BoxPromptInput').val(properties.input);

which should be

$('#BoxPromptInput').val(input);

With that you can now really set the text for the input box at the prompt.

To make it really nice you could add this one line below

$('#BoxPromptInput').focus(function(){
	// Check for the change
	if(this.value == input){
		this.select();
	}
});
Johnboy says:

Hi,
Is there a way to control the Sexy Alert Box so it automatically appears when a user lands on a page (rather then clicking on a link) as i want to display some important information that all users should see..?

Thanks
Johnboy

Ch sab says:

hi,

i have integrated alerts into my project but i have lost the sliding of the alert because i have to use the compitibilty edition of jquery so that it wont conflit with javascript menus file

error came is

Error: o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
Source File: http://localhost/jquery.min.js
Line: 19

can u please help me out here

hans says:

me podrian mostrar un ejemplo en php de como implementarlo porfavor.

ber says:

se puede agrandar el ancho del popup? Muchas gracias!

Edgard says:

Alguien me podría decir si este componente se puede usar en asp.net? lo he probado en simples paginas html y funciona correctamente pero cuando lo intento llamar desde un evento en asp de esta forma:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
ScriptManager.RegisterStartupScript(Me, Me.GetType(), “EjecutarAbrirPopUp”, “Sexy.alert(’Hola’);”, True)

End Sub

Me sale un error que me dice que : ‘Sexy’ is undefined

gracias de antemano

Edgard says:

Alguien me podría decir si este componente se puede usar en asp.net? lo he probado en simples paginas html y funciona correctamente pero cuando lo intento llamar desde un evento en asp de esta forma:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
ScriptManager.RegisterStartupScript(Me, Me.GetType(), “EjecutarAbrirPopUp”, “Sexy.alert(’Hola’);”, True)

End Sub

Me sale un error que me dice que : ‘Sexy’ is undefined
gracias de antemano

Fer says:

Gracias en primera medida, como veran mis conosimientos son pocos al respecto, mi inquietud es la siguiente, al descargar me gusta la forma como se personalizo esta alerta sexy, de echo quiero ponerla en mi web, seria posible poner esa modificacion la ocupa presisamente par q en mi web descarguen un ichero.
y la segunda inquietud es q si me alludan a hacerlo en una pagina limpia en html ose el index solo con la alerta sexy, y donde poner el link para q descarguen dicho archivo graciaas

sysmaya says:

Al cargar un iframe dentro del sexy, pues no genera error, solo que asigan un estilo hidden al objeto iframe.

Sexy.alert(”");

al intentar forzar la visibilidad del iframe:
$(’iframe’).show();
tampoco lo ejecuta pero llamando a la propiedad OK++

$(”#abc”).css(’visibility’,'visible’);

Asi podemos cargar un iframe dentro del Sexy, y dentro podremos colocar todo un formulario con N campos.

La cuestion es como cerrar el Sexy desde dentro del iframe.

para eso uso parent. mmmm hasta ahi se por que el sexy no tiene una (o si??) funcion Sexy.close().

Pero se podria enviar el form interno del iframe con el click del boton Sexy y de paso se cierra.

sysmaya says:

Para edgard, Claro que se puede usar sexy y todo el Jscript dentro de asp. Solo que debes escribir el codigo dentro de una etiqueta script y con el type jscript.

ASP usa por defecto VBscript y no debiera presentar problema usar ambos dentro de una pagina.

Pero es mejor aprender PHP.

Alex says:

Sera posible mostrar el mensaje de error sin utilizar un enlace??
Necesito mostrar este error pero desde un echo en php

Gracias

Marcelo says:

Sera posible mostrar el mensaje de error sin utilizar un enlace??
Necesito mostrar este error pero desde un echo en php! [2]

Gracias

Hi,

I found a bug into preloadImages function, the final url was comming with double quotes, and make the url invalid… so I added another replace to remove the double quotes from URL, if someone know a better way to fix this ;)

  preloadImages: function() {
    var img = new Array(2);
    img[0] = new Image();img[1] = new Image();img[2] = new Image();
    img[0].src = this.Box.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1").replace(new RegExp("["+'"'+"]","g") ,'');
    img[1].src = this.InBox.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1").replace(new RegExp("["+'"'+"]","g") ,'');
    img[2].src = this.Contenedor.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1").replace(new RegExp("["+'"'+"]","g") ,'');
  },
any says:

hola a todos soy nueva programando y quiero insertar este sexyalert que esta buenisimo pero me sale error al ejecutar me pueden ayudar

gracias

pablo says:

Como podría hacer para que se aparezca una vez se ha enviado un correo a través de un formulario?El botón es el de abajo y el formulario es form1.
Gracias

<label>
                           <input type="submit" name="submit" id="submit" value="Enviar solicitud" class="envio"/>
                         </label>
sam says:

do u have any english version of this article?
thnaks

Toni says:

Hola!
En el siguiente código:

$("#formulario").submit();
Sexy.info('Mensaje enviado correctamente', {onComplete: function(returnvalue) {if(returnvalue){$("input:text").attr("value","");} } })

¿Sabeis porqué el sexyalert no espera a que se pulse el botón de OK y se cierra automáticamente?
Si lo pruebo sin el envio del formulario funciona perfectamente, pero al hacer el submit primero, deja de funcionar…

Gracias!

Gerardo says:

Disculpen necesito ayuda, quisiera saber si se puede mostrar una alerta pero sin utilizar un enlace o boton.
Es urgente. Gracias

Help says:

Lo siento, no puedo hablar español. ¿Cómo puede hacer el pop alerta hasta onload y no con el uso de un vínculo?

Oyunlar says:

Very very nice, thank you very much..

Carlos says:

Al utilizar los alerts en un jsp el tamaño del fondo opaco (Overlay) aparece más pequeño que el tamaño (height) de la página. Alguna sugerencia?