Modal

[modal] shortcode arguments
classes:
Size -
[small]
Type -
[basic]
Height -
[longer]
id:
ID needs to be specified, and the element that should open the modal should have the modal argument with the ID as the value.
header:
Modal header text.
image:
Link to image in the modal.
alt:
Alternative text for the image in the modal.
close:
Set to "false" to not show the close icon.
scrolling:
Set to "true" to enable scrolling content.
raw:
Set to "true" to construct modal content manually.
<button modal="modal-normal">Normal modal</button>
<modal id="modal-normal">
  <lorem 2>
</modal>

<button modal="modal-small">Small modal</button>
<modal small id="modal-small">
  <lorem>
</modal>

<button modal="modal-basic">Basic modal</button>
<modal basic id="modal-basic">
  <lorem>
</modal>
<button modal="modal-2">Header modal</button>
<modal id="modal-2" header="Modal header">
  <lorem>
</modal>
Long modals
<button modal="modal-long">Long modal</button>
<modal long id="modal-long" header="Long content">
  <lorem 10>
</modal>

<button modal="modal-scrolling">Scrolling modal</button>
<modal id="modal-scrolling" header="Scrolling content" scrolling="true">
  <lorem 10>
</modal>
Notes
Modal with a lot of content can be long or scrolling.
<button modal="modal-img">Image modal</button>
<modal id="modal-img" header="Image modal" image="/avatars/1.png">
  <header>Modal with an image</header>
  <p>Lorem ipsum dolor sit amet, dolor maiorum ius ei.</p>
  <p>Mei diceret dolorum molestiae. Placerat complectitur vim ex.</p>
</modal>
Scrolling modal with image
<button modal="modal-img-scrolling">Scrolling image modal</button>
<modal id="modal-img-scrolling" header="Image modal" image="/avatars/2.png" scrolling="true">
  <header>Scrolling modal with an image</header>
  <lorem 10>
</modal>
Raw modal
<button modal="modal-raw">Raw modal</button>
<modal id="modal-raw" raw="true">
  <div header>Modal header</div>
  <div content>
    <lorem>
  </div>
  <div actions>
    <button positive>Approve</button>
    <button>Neutral</button>
    <button negative>Cancel</button>
  </div>
</modal>
Notes
By default modal content is automatically wrapped to .header and .content containers. Setting raw to true allows to do this manually to get a more specific result.
Raw modal with image
<button modal="modal-raw-img">Raw image modal</button>
<modal id="modal-raw-img" raw="true">
  <div header>Modal header</div>
  <div image content>
    <image medium src="/avatars/3.png" alt="Modal placeholder image">
    <chap-div description>
      <header>Raw modal with an image</header>
      <p>Lorem ipsum dolor sit amet, dolor maiorum ius ei.</p>
      <p>Mei diceret dolorum molestiae. Placerat complectitur vim ex.</p>
    </chap-div>
  </div>
  <div actions>
    <button positive>Approve</button>
  </div>
</modal>

Leave a comment

Your email address will not be published. Required fields are marked *