Modal

Modal shortcode arguments
Classes
Sizemini tiny small large
Typebasic
Heightlonger
idID needs to be specified, and the element that should open the modal should have the modal argument with the ID as the value.
headerModal header text.
imageLink to image in the modal.
altAlternative text for the image in the modal.
closeSet to "false" to not show the close icon.
scrollingSet to "true" to enable scrolling content.
rawSet to "true" to construct modal content manually.
<button modal="modal-mini">Mini modal</button>
<modal mini id="modal-mini">
  <lorem short>
</modal>

<button modal="modal-tiny">Tiny modal</button>
<modal tiny id="modal-tiny">
  <lorem>
</modal>

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

<button modal="modal-medium">Medium modal</button>
<modal id="modal-medium">
  <lorem 2>
</modal>

<button modal="modal-large">Large modal</button>
<modal large id="modal-large">
  <lorem 3>
</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 *