Emular las alertas modales de Facebook con jQuery

por .

Uno de los componentes relacionados a la usabilidad de Facebook que no fue prácticamente modificado con el correr de los años son los cuadros de dialogo modales. Estas alertas están representadas por un titulo, una descripción y dos botones, uno para aceptar la acción y otro para cancelarla.

Una manera de emular estos cuadros de diálogos modales es utilizando FB Modal, un plugin jQuery que es extremadamente fácil de utilizar. El plugin es compatible con los navegadores más modernos: Firefox, Opera, Safari y Chrome.

Así se ve el plugin en funcionamiento:

Alerta modal estilo Facebook con jQuery

Una vez instalada la biblioteca del plugin, el mismo puede ser iniciado de la siguiente manera:

$("#your-element-id").fbmodal();

FB Modal tiene multiples opciones de configuración para que podamos personalizarlo a nuestro gusto. Las opciones disponibles son:

$("#your-element-id").fbmodal({
       title: "FaceBook Modal Demo",
      cancel: "Cancel",
        okay: "Okay",
  okaybutton: true,
cancelbutton: true,
     buttons: true,
     opacity: 0.0,
     fadeout: true,
overlayclose: true,
    modaltop: "30%",
  modalwidth: "400"
});

El plugin es muy simple y claro, se pueden cambiar los colores muy rápidamente cambiando unos pocos valores.

Web: FB Modal

Categorizado en: