Modal

An overlay window that displays content on top of the current page.
---
block:
  _bookshop_name: layouts/modal
  title: This is a Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: null
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>

Properties

titlestring

Displays at the top of the modal when open

content_blockscomponent array

Content blocks to show in Modal

raw_contentstring

Alternatively (or additionally) Raw HTML content to display in the modal

optionsobject

Configuration options for the Button Group

idstring

A unique ID that is used to link to the modal

sizeenum

The size of the modal window

none
xs
s
m
l
xl
2xl

Examples

Sizes

---
block:
  _bookshop_name: layouts/modal
  title: This is a XS Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: xs
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>


---
block:
  _bookshop_name: layouts/modal
  title: This is a S Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: s
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>


---
block:
  _bookshop_name: layouts/modal
  title: This is a M Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: m
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>


---
block:
  _bookshop_name: layouts/modal
  title: This is a L Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: l
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>


---
block:
  _bookshop_name: layouts/modal
  title: This is a XL Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: xl
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>


---
block:
  _bookshop_name: layouts/modal
  title: This is a 2XL Model
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
  options:
    size: 2xl
    id: modal-example
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>

Content Blocks

---
block:
  _bookshop_name: layouts/modal
  title: null
  content: null
  content_blocks:
    - _bookshop_name: elements/heading
      inline_markdown: Welcome to *Mastering JavaScript*
      level: h2
      options:
        size: null
        weight: null
        case: null
        decoration: null
        margin:
          top: none
          bottom: null
        align: center
      icon:
        alt: null
        name: null
        options:
          color: null
          background: muted
          position: null
    - _bookshop_name: elements/paragraph
      inline_markdown: >-
        This course will take you from JavaScript basics to advanced concepts,
        equipping you with the skills to build dynamic web applications. Perfect
        for both beginners and those looking to deepen their knowledge.
      options:
        align: center
        size: null
        decoration: null
        margin:
          top: null
          bottom: null
    - _bookshop_name: layouts/button-group
      button_blocks:
        - _bookshop_name: elements/button
          label: Start Course
          options:
            layout: null
            size: null
            type: primary
            outline: null
          icon:
            name: null
            options:
              display_mode: null
              position: null
        - _bookshop_name: elements/button
          label: Learn More
          icon_only: false
          icon_position: null
          options:
            layout: null
            size: null
            type: secondary
            outline: true
          icon:
            options:
              display_mode: null
              position: null
      options:
        direction: row
        align: center
        gap: null
        margin:
          top: null
          bottom: null
  options:
    size: m
    id: course-overview
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.options.id }}" data-open-modal>Open Modal</a>
<p class="no_js">The pure CSS modal won't work in an iframe like this but it will outside of an iframe.</p>