Modal

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

<a href="#{{ block.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

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

contentstring

HTML content to display in the modal

content_blockscomponent array

Content blogs to display in the modal

Examples

Sizes

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

<a href="#{{ block.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
  size: s
  id: modal-example
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.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
  size: m
  id: modal-example
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.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
  size: l
  id: modal-example
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.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
  size: xl
  id: modal-example
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.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
  size: 2xl
  id: modal-example
  content: <p>Hello, this is the contents of the modal.</p>
  content_blocks: null
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.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
  size: m
  id: course-overview
  content: null
  content_blocks:
    - _bookshop_name: elements/heading
      inline_markdown: Welcome to *Mastering JavaScript*
      level: h2
      size: null
      weight: null
      align: center
      case: null
      decoration: null
      margin:
        top: none
        bottom: null
      icon:
        alt: null
        name: null
        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.
      align: center
      size: null
      decoration: null
      margin:
        top: null
        bottom: null
    - _bookshop_name: layouts/button-group
      direction: row
      align: center
      gap: null
      button_blocks:
        - _bookshop_name: elements/button
          label: Start Course
          icon:
            display_mode: null
            position: null
            name: null
          size: null
          type: primary
          outline: null
        - _bookshop_name: elements/button
          label: Learn More
          icon_only: false
          icon: null
          icon_position: null
          size: null
          type: secondary
          outline: true
---
{% bookshop "{{block._bookshop_name}}" bind: block  %}

<a href="#{{ block.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>