🖥 Dialogs API

The Dialogs API utilizes the Modal Vanilla dependency to facilitate the display of dialogs. This dependency is functionally and visually compatible with the Bootstrap framework. This library has been modified to allow multiple dialogs to be displayed simultaneously.

Methods

setController

• This method sets the JavaScript controller (module) for the dialog, allowing you to register additional event listeners (such as show, shown, hide, hidden) or other logic related to the dialog.

  $response->setController("require('ModalMonitor')");

setTitle

• Use this method to set the title of a dialog.

  $response->setTitle("dialog title");

setBody

• This method sets the body content of a dialog.

  $response->setBody("dialog body");

setFooter

• Use this method to set the footer content of a dialog.

  $response->setFooter('dialog footer');

setDialog

• This method sets the entire content of a dialog, including title, body, and footer.

  $response->setDialog('dialog content');

closeDialogs

• This method closes all opened dialogs.

  $response->closeDialogs();

closeDialog

• Use this method to close the currently displayed dialog.

  $response->closeDialog();

dialog

• This method renders the defined dialog.

  $response->dialog();

Live Example

You can observe this API in action in the demo page provided.

Example

If you want to trigger a dialog from the backend:

<?php

// dialog.php

$response = new \dobron\BigPipe\DialogResponse();

$response->setTitle('Dialog title')

->setController("require('ModalLogger')")

->setBody('html <strong>content</strong>')

->setFooter('<button>close</button>')

->dialog();

$response->send();

To open this dialog from the frontend, you can use the following HTML code:

<a href="#"

ajaxify="/dialog.php"

rel="dialog">Open Dialog</a>

For frontend-triggered dialog invocation:

import Dialog from "bigpipe-util/src/core/Dialog";

(new Dialog()).showFromModel({

controller: 'ModalLogger',

backdrop: 'static',

title: 'Dialog title',

body: 'html <strong>content</strong>',

footer: '<button>close</button>',

});

Here's an example of the implementation of a controller that can be attached to the dialog:

export default class ModalLogger

{

constructor(dialog) {

console.log('dialog data:', dialog);

dialog.on('show', (event) => {

console.log('event: show', event)

});

dialog.on('shown', (event) => {

console.log('event: shown', event)

});

dialog.on('hide', (event) => {

console.log('event: hide', event)

});

dialog.on('hidden', (event) => {

console.log('event: hidden', event)

});

}

}