` -- only the contents
of the container will be placed inside the modal, the rest of the
page will be ignored.
If you'd like to have a link or button that closes the modal,
you can just add a `data-dismiss="modal"` to the link,
standard Bootstrap convention. But you can also have
an href on this link for non-JS contexts, we'll make sure
inside the modal it closes the modal and the link is NOT followed.
Link or forms inside the modal will ordinarily cause page loads
when they are triggered. However, if you'd like their results
to stay within the modal, just add `data-blacklight-modal="preserve"`
to the link or form.
Here's an example of what might be returned, demonstrating most of the devices available:
One additional feature. If the content returned from the AJAX modal load
has an element with `data-blacklight-modal=close`, that will trigger the modal
to be closed. And if this element includes a node with class "flash_messages",
the flash-messages node will be added to the main page inside #main-flahses.
== Events
We'll send out an event 'loaded.blacklight.blacklight-modal' with the #blacklight-modal
dialog as the target, right after content is loaded into the modal but before
it is shown (if not already a shown modal). In an event handler, you can
inspect loaded content by looking inside $(this). If you call event.preventDefault(),
we won't 'show' the dialog (although it may already have been shown, you may want to
$(this).modal("hide") if you want to ensure hidden/closed.
The data-blacklight-modal=close behavior is implemented with this event, see for example.
*/
// We keep all our data in Blacklight.modal object.
// Create lazily if someone else created first.
if (Blacklight.modal === undefined) {
Blacklight.modal = {};
}
// a Bootstrap modal div that should be already on the page hidden
Blacklight.modal.modalSelector = '#blacklight-modal';
// Trigger selectors identify forms or hyperlinks that should open
// inside a modal dialog.
Blacklight.modal.triggerLinkSelector = 'a[data-blacklight-modal~=trigger]';
Blacklight.modal.triggerFormSelector = 'form[data-blacklight-modal~=trigger]';
// preserve selectors identify forms or hyperlinks that, if activated already
// inside a modal dialog, should have destinations remain inside the modal -- but
// won't trigger a modal if not already in one.
//
// No need to repeat selectors from trigger selectors, those will already
// be preserved. MUST be manually prefixed with the modal selector,
// so they only apply to things inside a modal.
Blacklight.modal.preserveLinkSelector = Blacklight.modal.modalSelector + ' a[data-blacklight-modal~=preserve]';
Blacklight.modal.containerSelector = '[data-blacklight-modal~=container]';
Blacklight.modal.modalCloseSelector = '[data-blacklight-modal~=close]';
// Called on fatal failure of ajax load, function returns content
// to show to user in modal. Right now called only for extreme
// network errors.
Blacklight.modal.onFailure = function (jqXHR, textStatus, errorThrown) {
console.error('Server error:', this.url, jqXHR.status, errorThrown);
var contents = '' + '
Expected a successful response from the server, but got an error
' + '
' + this.type + ' ' + this.url + "\n" + jqXHR.status + ': ' + errorThrown + '
';
$(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
Blacklight.modal.show();
};
Blacklight.modal.receiveAjax = function (contents) {
// does it have a data- selector for container?
// important we don't execute script tags, we shouldn't.
// code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/main/src/ajax/load.js?source=c#L62
var container = $('