Modals

Modals are display with overlay and can be used for various purposes. They can be simple or complex. Simple modals are used for displaying information.

Complex modals are used for displaying forms or other interactive content.

Simple modal

You can show modals with JavaScript.

        
import Modal from "./vendor/pjutils/utils/Modal";
 
const modalButton = document.querySelector('#show-modal');
 
modalButton.addEventListener('click', () => {
    const modal = new Modal();
 
    modal.setTitle('Modal title')
        .setBody('<p>This is a modal with HTML content</p>')
        .setFooterButton('Close', function () {
            modal.close();
        }, 'danger')
        .open();
});    

You can set title and body of the modal. If you need to add a button to the footer, you can use the setFooterButton method. The first argument is the button label, the second argument is the callback function and the third argument is the button type.

Complex modal

If you want show form in modal, you can use complex modal for that.

Complex modals have title aligned to the left

        
import Modal from "./vendor/pjutils/utils/Modal";
 
const complexModalButton = document.querySelector('#show-complex-modal');
 
complexModalButton.addEventListener('click', () => {
    const modal = new Modal(true);
 
    // x-form component with inputs
    let body = '<form action="#" method="POST">';
    body += '<div class="pj-classic">';
    body += '<label for="input-name">Name</label>';
    body += '<input id="input-name" name="input-name" type="text">';
    body += '</div>';
    body += '<div class="pj-classic">';
    body += '<label for="input-email">Email</label>';
    body += '<input id="input-email" name="input-email" type="email">';
    body += '</div>';
    body += '</form>';
 
    modal.setTitle('Complex modal')
        .setBody(body)
        .setFooterButtonAsSubmit('Submit', 'info')
        .setFooterButton('Close', function () {
            modal.close();
        }, 'neutral')
        .open();
});    

If you want to submit form in modal, you can use setFooterButtonAsSubmit method. The first argument is the button label and the second argument is the button type.

It will automatically create form instance of the modal form and submit it when the button is clicked. One thing you need to do is set the action-label attribute to null in the x-form component.

Method setFooterButtonAsSubmit will automatically add submit button to the modal