Modal shortcode usage and examples

Modal shortcode arguments

Modal

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo. Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo. Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.

Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea. Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea. Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea.

<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>

Modal with a header

<button modal="modal-2">Header modal</button>
<modal id="modal-2" header="Modal header">
  <lorem>
</modal>

Modal in a form

Field

<form>
  <field label="Field">
    <input action placeholder="Placeholder...">
      <button icon="info" modal="modal-in-form" type="button">Help</button>
	</input>
    <modal id="modal-in-form" header="Help text">
      <lorem>
    </modal>
  </field>
  <button primary type="submit">Submit form</button>
</form>

When adding a button that triggers a modal inside an HTML <form> context it is important to add type="button" to the modal button in order for it to not trigger the form submission on click.

Long modals

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo. Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo. Esse oportere temporibus at vix, has reque paulo appareat ad, an prima salutatus referrentur sea. Probo minimum eos ut, ea lobortis perpetua nec. Cum posse semper et. Graeci tamquam ut sit, an appareat adolescens eum. Novum elitr in quo, cum ea vocibus signiferumque. Solet antiopam mediocritatem ei per, an vim clita alterum verterem, utinam dignissim dissentiunt te quo.

Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea. Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea. Ex pri doctus offendit, sint error dignissim mel ea, ex sed eius graeco timeam. At eam impedit adipisci accusata, impedit accusam mel ex, eam docendi albucius an. Ius detraxit menandri cu. Per falli veniam mentitum an, alii ancillae et has. Eu his quod tollit, mazim quaeque habemus usu ea.

Consetetur signiferumque mei et, quo no dicit deleniti epicurei. Ex qui dolorum periculis, mea soluta persius et. Mea atqui facilisi id. Duo deserunt electram pertinacia et, ne cum ridens gubergren, dicunt animal hendrerit sea an. Has tota minimum reprehendunt eu. Consetetur signiferumque mei et, quo no dicit deleniti epicurei. Ex qui dolorum periculis, mea soluta persius et. Mea atqui facilisi id. Duo deserunt electram pertinacia et, ne cum ridens gubergren, dicunt animal hendrerit sea an. Has tota minimum reprehendunt eu. Consetetur signiferumque mei et, quo no dicit deleniti epicurei. Ex qui dolorum periculis, mea soluta persius et. Mea atqui facilisi id. Duo deserunt electram pertinacia et, ne cum ridens gubergren, dicunt animal hendrerit sea an. Has tota minimum reprehendunt eu.

Oportere dignissim ea nam. Nam no fugit maluisset similique, nobis verterem mel et. Debet apeirian ei quo, autem quando pro no. Ne mandamus deterruisset eam. Paulo timeam dignissim sit no, mei ex possim scaevola torquatos, est an ullum maiestatis. Oportere dignissim ea nam. Nam no fugit maluisset similique, nobis verterem mel et. Debet apeirian ei quo, autem quando pro no. Ne mandamus deterruisset eam. Paulo timeam dignissim sit no, mei ex possim scaevola torquatos, est an ullum maiestatis. Oportere dignissim ea nam. Nam no fugit maluisset similique, nobis verterem mel et. Debet apeirian ei quo, autem quando pro no. Ne mandamus deterruisset eam. Paulo timeam dignissim sit no, mei ex possim scaevola torquatos, est an ullum maiestatis.

Ne vim sapientem referrentur. Cu qui eleifend persequeris. Laudem commune honestatis no per, eam integre moderatius ex, cu quem brute vix. Duo suas virtute ei, mollis tritani sanctus eos te. Nulla laoreet vim ut, scaevola vivendum vis eu, ius accusamus democritum mediocritatem eu. Ne vim sapientem referrentur. Cu qui eleifend persequeris. Laudem commune honestatis no per, eam integre moderatius ex, cu quem brute vix. Duo suas virtute ei, mollis tritani sanctus eos te. Nulla laoreet vim ut, scaevola vivendum vis eu, ius accusamus democritum mediocritatem eu. Ne vim sapientem referrentur. Cu qui eleifend persequeris. Laudem commune honestatis no per, eam integre moderatius ex, cu quem brute vix. Duo suas virtute ei, mollis tritani sanctus eos te. Nulla laoreet vim ut, scaevola vivendum vis eu, ius accusamus democritum mediocritatem eu.

At dicant nominavi ius, impetus euismod mel in, no atomorum splendide efficiendi pro. Augue numquam definitiones quo ei. Vix eu sumo accusata, per ut libris fabulas appellantur. Ne inani graece repudiare vis, populo vivendum perfecto te has. At dicant nominavi ius, impetus euismod mel in, no atomorum splendide efficiendi pro. Augue numquam definitiones quo ei. Vix eu sumo accusata, per ut libris fabulas appellantur. Ne inani graece repudiare vis, populo vivendum perfecto te has. At dicant nominavi ius, impetus euismod mel in, no atomorum splendide efficiendi pro. Augue numquam definitiones quo ei. Vix eu sumo accusata, per ut libris fabulas appellantur. Ne inani graece repudiare vis, populo vivendum perfecto te has.

At eum epicuri persequeris contentiones, no mei vero elaboraret, cu omnes putant sapientem vel. Vis sanctus atomorum eu, no simul meliore deterruisset est. An suscipit sadipscing nam. Pri ullum bonorum disputationi in, ea primis epicuri antiopam pri, cum cibo elitr causae no. Sumo ponderum ad pro, etiam luptatum laboramus in eam, mea ludus possim mediocritatem ad. At eum epicuri persequeris contentiones, no mei vero elaboraret, cu omnes putant sapientem vel. Vis sanctus atomorum eu, no simul meliore deterruisset est. An suscipit sadipscing nam. Pri ullum bonorum disputationi in, ea primis epicuri antiopam pri, cum cibo elitr causae no. Sumo ponderum ad pro, etiam luptatum laboramus in eam, mea ludus possim mediocritatem ad. At eum epicuri persequeris contentiones, no mei vero elaboraret, cu omnes putant sapientem vel. Vis sanctus atomorum eu, no simul meliore deterruisset est. An suscipit sadipscing nam. Pri ullum bonorum disputationi in, ea primis epicuri antiopam pri, cum cibo elitr causae no. Sumo ponderum ad pro, etiam luptatum laboramus in eam, mea ludus possim mediocritatem ad.

Ei aeque reprehendunt duo, te ludus invenire per, nibh ocurreret eu cum. No fabulas civibus disputationi eos, nec ei ipsum facilis interpretaris. Ut debet impedit vel, pro ex tollit sensibus. Eum semper epicurei molestiae ea. Ei aeque reprehendunt duo, te ludus invenire per, nibh ocurreret eu cum. No fabulas civibus disputationi eos, nec ei ipsum facilis interpretaris. Ut debet impedit vel, pro ex tollit sensibus. Eum semper epicurei molestiae ea. Ei aeque reprehendunt duo, te ludus invenire per, nibh ocurreret eu cum. No fabulas civibus disputationi eos, nec ei ipsum facilis interpretaris. Ut debet impedit vel, pro ex tollit sensibus. Eum semper epicurei molestiae ea.

Paulo fuisset in duo. Dolorum qualisque deseruisse eam te. Est ea graeci nusquam, ex vix putent habemus copiosae. No quo facer primis. Inani argumentum vim ut, magna fabellas ne mea, pro mediocrem dignissim disputationi cu. Sed falli elitr laboramus te, audiam timeam docendi te eam. Paulo fuisset in duo. Dolorum qualisque deseruisse eam te. Est ea graeci nusquam, ex vix putent habemus copiosae. No quo facer primis. Inani argumentum vim ut, magna fabellas ne mea, pro mediocrem dignissim disputationi cu. Sed falli elitr laboramus te, audiam timeam docendi te eam. Paulo fuisset in duo. Dolorum qualisque deseruisse eam te. Est ea graeci nusquam, ex vix putent habemus copiosae. No quo facer primis. Inani argumentum vim ut, magna fabellas ne mea, pro mediocrem dignissim disputationi cu. Sed falli elitr laboramus te, audiam timeam docendi te eam.