> For the complete documentation index, see [llms.txt](https://hichemtech.gitbook.io/reqease-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hichemtech.gitbook.io/reqease-docs/modal-handler.md).

# Modal Handler

Modal handlers in ReqEase allow you to adapt the library's actions, such as showing modals or displaying progress, to custom modal behaviors or packages. While the default modal handler is 'bootstrap,' you have the flexibility to use 'jquery-confirm' (by including the [jQuery Confirm](https://github.com/craftpip/jquery-confirm) script) or create your custom modal handler for specific modal libraries. Modal handlers are used by both the loading indicator and response handlers in ReqEase.

## **Base Modal Handler**

The foundation of all modal handlers in ReqEase is the `ModalHandler` class:

```typescript
export class ModalHandler {
    protected options: ModalOptions;
    requester: Requester;
    static label: string;
    private readonly _modalCallbacks: ModalCallbacks[];
    private readonly _internalCallbacks: ModalCallbacks;
    $modal: JQuery = null;
    retry: () => void = () => {};

    constructor(requester: Requester, options: ModalOptions) {
        // Constructor details
    }

    // Methods to show and close the modal
    show(): void {}
    close(): void {}

    modalIsShowed(): boolean {
        return false;
    }

    // Other protected methods for building modal types
    protected build() {}

    // More protected methods for building specific modal types
    protected buildLoadingModal(_options: ModalLoadingOptions) {}
    protected buildProgressModal(_options: ModalProgressOptions) {}
    protected buildMessageModal(_options: ModalMessageOptions) {}
    protected buildConfirmationModal(_options: ModalConfirmationOptions) {}
    protected buildDataNeededModal(_options: ModalDataNeededOptions) {}

    // Additional protected methods
    protected buildIcon(): string {}

    // Callbacks to customize modal behavior
    get modalCallbacks(): ModalCallbacks {
        return this._internalCallbacks;
    }

    set modalCallbacks(value: ModalCallbacks) {
        this._modalCallbacks.push(value);
    }
}
```

\
**Modal Handlers in ReqEase**

Modal handlers in ReqEase allow you to adapt the library's actions, such as showing modals or displaying progress, to custom modal behaviors or packages. While the default modal handler is 'bootstrap,' you have the flexibility to use 'jquery-confirm' (by including the jQuery Confirm script) or create your custom modal handler for specific modal libraries. Modal handlers are used by both the loading indicator and response handlers in ReqEase.

**Base Modal Handler**

The foundation of all modal handlers in ReqEase is the `ModalHandler` class:

```typescript
export class ModalHandler {
    protected options: ModalOptions;
    requester: Requester;
    static label: string;
    private readonly _modalCallbacks: ModalCallbacks[];
    private readonly _internalCallbacks: ModalCallbacks;
    $modal: JQuery = null;
    retry: () => void = () => {};

    constructor(requester: Requester, options: ModalOptions) {
        // Constructor details
    }

    // Methods to show and close the modal
    show(): void {}
    close(): void {}

    modalIsShowed(): boolean {
        return false;
    }

    // Other protected methods for building modal types
    protected build() {}

    // More protected methods for building specific modal types
    protected buildLoadingModal(_options: ModalLoadingOptions) {}
    protected buildProgressModal(_options: ModalProgressOptions) {}
    protected buildMessageModal(_options: ModalMessageOptions) {}
    protected buildConfirmationModal(_options: ModalConfirmationOptions) {}
    protected buildDataNeededModal(_options: ModalDataNeededOptions) {}

    // Additional protected methods
    protected buildIcon(): string {}

    // Callbacks to customize modal behavior
    get modalCallbacks(): ModalCallbacks {
        return this._internalCallbacks;
    }

    set modalCallbacks(value: ModalCallbacks) {
        this._modalCallbacks.push(value);
    }
}
```

* `protected options: ModalOptions`: The modal's configuration options.
* `requester: Requester`: A reference to the Requester instance.
* `static label: string`: Each modal handler has a label to identify its type.
* `_modalCallbacks` and `_internalCallbacks`: Callbacks to customize modal behavior.
* `show()` and `close()`: Methods to show and close the modal.
* `modalIsShowed()`: A method to check if the modal is currently displayed.
* Various protected methods for building different modal types.

## **Custom Modal Handler Example**

Suppose you want to create a custom modal handler for a specific modal library called 'my-modal-library.' Here's how you can do it:

1. Create your custom modal handler class, extending `ModalHandler`:

```typescript
export class MyModalHandler extends ModalHandler {
    static label = "my-modal-library";

    constructor(requester: Requester, options: ModalOptions) {
        super(requester, options);
    }

    show(): void {
        // Custom logic to show 'my-modal-library'
    }

    close(): void {
        // Custom logic to close 'my-modal-library'
    }

    // Additional custom methods and logic for 'my-modal-library'
}
```

2. Register your custom modal handler in the Requester configuration using the `modalHandlersToRegister` option:

```
const myRequester = new Requester({
    // Other options
    modalHandlersToRegister: [MyModalHandler],
});
```

By creating and registering a custom modal handler, you can seamlessly integrate ReqEase with your chosen modal library, providing a consistent and user-friendly experience in your web application.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hichemtech.gitbook.io/reqease-docs/modal-handler.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.