Dialogs
The HTML dialog element offers support for dialogs and subwindows, and allows making richer websites and web applications. While HTML dialogs are meant to be controlled by Javascript, Sircl offers Javascript-less alternatives to most common dialog operations.
Standard HMTL dialogs
With standard HTML, you can open a dialog on page load using the open attribute (but you cannot open dialogs in modal mode without Javascript). And you can close a dialog either by submitting a form using method="dialog" inside the dialog, or by hitting a button that loads a new page without the dialog, for instance by submitting a regular form (with POST or GET methods).
Other interactions, such as open a dialog without page reload, open a dialog in modal mode, closing a dialog and actually doing something with the result without full page reload, require the use of Javascript.
Sircl provides alternative ways to use dialogs without the need for Javascript.
Showing dialogs
Show dialogs on click
Sircl adds the capability to show a dialog on click with the onclick-showdialog attribute:
<button type="button" onclick-showdialog="#dlg1"> Show dialog </button>
<dialog id="dlg1">
<h3>A dialog</h3>
<p>With some content.</p>
</dialog>By default, the dialog shows as non-modal. To have a dialog show as modal, add the dialog-modal class to the dialog itself:
<button type="button" onclick-showdialog="#dlg1"> Show modal dialog </button>
<dialog id="dlg1" class="dialog-modal">
<h3>A dialog</h3>
<p>With some content.</p>
</dialog>Show dialogs after delay
Using standard HTML, adding an open attribute on a dialog results in it to show up immediately (in non-modal mode).
Using the Sircl onload-showdialogafter attribute, you can specify after how many seconds after initializing the page(part), the dialog should show up:
<dialog onload-showdialogafter="5">
<h3>A dialog</h3>
<p>Shows up after 5 seconds.</p>
</dialog>If the dialog has the dialog-modal class, the dialog will show as modal, otherwise it will show as regular.
Show dialogs from load
Whenever content is loaded inside a DIALOG element, the dialog will automatically show up.
For example:
<a href="/NewsletterInvite" target="#nlidlg"> Subscribe to our newsletter </a>
<dialog id="nlidlg">
</dialog>Clicking the hyperlink will load the /NewsletterInvite pagepart. Because the inline target matches the DIALOG element, or matches any element inside a DIALOG element, when the content of the pagepart is loaded and injected in the target element, the surrounding dialog will show up automatically.
Preshow dialogs and restore content
In the above example, showing dialogs from load, the dialog shows up once the load request is terminated and the response is known. There is a good reason for that: the server could still decide to return content for another inline target by means of the X-Sircl-Target response header (see the chapter about Partial Loading), or to return no content at all (returning status code 204).
The drawback is that when the user clicks the link or button to load content and show the dialog, it takes some time (the time it takes to make the server request and receive the response) before the dialog is shown and the user gets feedback on the click action. Though you could use spinners or other load indiactors, another option is to show the dialog before initiating the server request.
If the target dialog element (the DIALOG element that is the target or that surrounds the target of a request) has the class beforeload-showdialog, then the dialog will show up before initiating the server request:
<a href="/NewsletterInvite" target="#nlidlg"> Subscribe to our newsletter </a>
<dialog id="nlidlg" class="beforeload-showdialog onclose-restore dialog-modal">
Loading...
</dialog>The dialog then typically shows a loading message, spinner or animation that will be replaced by the loaded content.
Depending on the response given by the server, different actions are taken:
- The server returns content as expected: the content of the target is replaced with the content returned from the server.
- The server returns content but also a
X-Sircl-Targetheader to retarget the content: the dialog will be closed, and the content rendered in its new target. If that new target is part of another dialog, that dialog will show up. - The server returns no content (status code 204): the dialog will be closed.
In the default scenario, the dialog stays visible and the target content is replaced.
When the dialog is closed later on, and maybe reopened later, the target still contains the content of the previous load. Adding an onclose-restore class to the DIALOG element ensures that it's original content (i.e. a "loading..." message) is restored in the dialog once it is closed, so that if the dialog shows up a second time, it still initially has its initial content (i.e. a "loading..." message).
Closing dialogs
Close dialogs on click
A dialog can be closed by clicking an element inside the dialog that has the onclick-closedialog class:
<dialog open>
<h3>A dialog</h3>
<p>With some content.</p>
<button type="button" class="onclick-closedialog"> Close </button>
</dialog>To close a dialog that is not containing the clicked element, use onclick-closedialog as an attribute, with as value a CSS selector that matches the dialog(s) to close.
The following button closes all dialogs on the page:
<button type="button" onclick-closedialog="DIALOG"> Close all dialogs </button>Close dialogs from load
Whenever content is loaded inside a DIALOG element, the dialog will automatically show up.
In the same way, when a trigger inside a DIALOG element causes content to be loaded outside the DIALOG element, the dialog will automatically close.
In the following example, pressing the Edit button opens the edit dialog which contains a form. Submitting the form with the OK button will close the dialog as the target of the form is outside the dialog:
<div id="welcoming">
Hello Kim !
<button type="button" onclick-showdialog="#editdlg"> Edit </button>
</div>
<dialog id="editdlg">
<form action="/UpdateName" target="#welcoming">
<input type="text" name="name" />
<button type="submit"> <i class="spinner"></i> OK </button>
</form>
</dialog>Closing dialogs from response status
When a load action takes place and the target is a DIALOG element, or is inside a DIALOG element, and the server responds with a status code 204 (No content) to the load action, then that dialog will be closed.
In the following example:
<dialog open>
<form action="/Register" class="target">
<input type="text" name="Name" placeholder="Name"/><br/>
<button type="submit"> Register </button>
</form>
</dialog>If, when submitting the form, the server responds with a status code 204, given the target of the request is the form itself, the dialog containing the form will be closed.
Exclusive dialogs
The HTML standard allows multiple dialogs to be open simultaneously.
To have all other dialogs closed when a new dialog shows up, decorate the new dialog with the dialog-exclusive class:
<dialog open>
<button onclick-showdialog="#nlidlg"> Subscribe to our newsletter </button>
</dialog>
<dialog id="nlidlg" class="dialog-exclusive dialog-modal">
<h3>Subscribe</h3>
<p>To our newsletter...</p>
</dialog>