modal dialogs
In J3 most developers used the mootools modals by adding the JHtml::__('behavior.modals') to their files. As mootools is no longer supported in Joomla you will need to migrate to the native bootstrap modals.
This is relatively easy.
To create the modal use the HtmlHelper call like so:
HTMLHelper::_('bootstrap.renderModal', 'modal-test-modal', $modalParams, $modalBody);
You can see a partial list of parameters here: https://joomla.stackexchange.com/questions/28825/jhtml-bootstrap-rendermodal-joomla-bootstrap-list-of-all-parameters-th
Creating a link to the modal is easy and there is only one difference between the J3 version and the J4 version and that is the data-toggle attribute.
'<a href="#modal-test-modal" data-bs-toggle="modal" data-toggle="modal" class="btn btn-default btn-small btn-sm">
<i class="fa fa-eye"></i> Modal test link</a>';
For J3 you use data-toggle , for J4 you use data-bs-toggle. Interestingly you can include both and the link will then work for both J3 and J4 without issue.
Note: If you wish to close the model from the modal itself based on some user action other than clicking a close button you can do the following:
On your main form add a javascript function called for example closeSearchModal and inside this function do a document.getElementById('searchModal').close();
Then on your modal form add an onclick or onchange or whatever event that calls this function: window.parent.closeSearchModal(); That should do it.