Introduction

¡Bienvenido a la documentación de iModalJS! una biblioteca de JavaScript poderosa y flexible diseñada para crear modales en capas, simulando el comportamiento de las aplicaciones nativas de Android e iOS en tus aplicaciones web.

No solo incluye componentes HTML diseñados específicamente para aplicaciones web, sino que también ofrece compatibilidad con el botón de retroceso para cerrar modales y soporte para gestos de deslizamiento para regresar, brindando una experiencia de usuario fluida e intuitiva.

Installation

include it directly in your project:

<link rel="stylesheet" href="path/src/css/imodal.css">
<script src="path/src/js/imodal.js"></script>

Or with CDN:

<link rel="stylesheet" href="https://cdn.imodal.itivos.com/src/v1-0-0/css/imodal.css">
<script src="https://cdn.imodal.itivos.com/src/v1-0-0/js/imodal.js"></script>

Usage

Here's a quick example of how to use iModal:

const modal = new iModal();
modal.title = 'Example Modal';
modal.html = '<p>This is an example modal.</p>';
modal.show();

Examples

Basic Modal

function modalBasic() {
    const modal = new iModal();
    modal.title = 'Example Title';
    modal.html = '
This is an example modal content.
';
    modal.show();
}

Ajax Content Modal

function modalWidhAjax() {
    const modal = new iModal();
    modal.title = 'Content remote';
    modal.actionUri = "https://imodal.itivos.com/requests.php?resource=show_list";
    modal.show();
}

Ajax Content Modal with params

function modalWidhAjax() {
    let param1 = "value1";
    let param2 = "value2";
    const modal = new iModal();
    modal.title = 'Content remote';
    modal.actionUri = "https://imodal.itivos.com/requests.php?resource=show_list_with_params";
    modal.dataToSend = {param1: param1, param2: param2};
    modal.method = "POST"; // GET | POST default: POST
    modal.show();
}

Contenido con opciones

function modalWidhOptions() {
    const modal = new iModal();
    modal.title = 'Content with options';
    modal.moreButton = true;
    modal.moreOptions = [
      { text: "Opción 1", link: "#", attributes: { id: "id_1", class: "valor1" } },
      { text: "Opción 2", link: "#", attributes: { id: "id_2", class: "valor2" } },
      { text: "Opción 3", link: "#", attributes: { id: "id_3", class: "valor3" } },
      { text: "Opción 4", link: "#", attributes: { id: "id_4", class: "valor4" } },
      { text: "Opción 5", link: "#", attributes: { id: "id_5", class: "valor5" } },
    ];
    modal.show();
}

Confirm Modal

Puedes mostrar un modal para confirmar una accion dentro del sistema.

function modalShowConfirm(){
    const myConfirmModal = new Confirm();
    const title = "Do you really want to change your password?";
    const message = "If you change your password, you will have to log in again, your data will be saved in the cloud";
    myConfirmModal.setConfirmProperties(title, message, null, `confirmMessage()`);
    myConfirmModal.show();
}