Modal

Creating Modal element

type Modal = {
    index: number;
    type: 'modal';
    target: Target;
    data: ModalData;
    closeButton: {
        styleProps: object;
        disabled: boolean;
    };
}

type PathComparator =
    'is' |
    'contains' |
    'startsWith' |
    'endsWith' |
    'regex';

type Target = {
    path: {
        value: string;
        comparator: PathComparator;
    };
}

type ModalData = {
    bodyContent: BodyContent;
    escToClose: boolean;
    clickOutsideToClose: boolean;
    progressBar: {
        disabled: boolean;
        styleProps: object;
    };
}

type BodyContent = string | Element | object | Function;

bodyContent can be a string, an HTML element, a React component or a Vue component. It is the main body of tooltip.

Setting this to true will take the user to the next step (Lusift.next()) on pressing the Esc key.

Default value: false

With clickOutsideToClose set to true, clicking outside the modal element will trigger Lusift.next().

Default value: false

Configure the progress bar at the top of the modal element -

Setting disabled to true will disable the progress bar. Default value is false

Set CSS properties to the progress bar element.

Setting disabled on closeButton object to true disables the close button on the top right of the tooltip element.

You can set CSS properties for the button with styleProps object on closeButton.