Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/lightbox-dialog

DS v4.1

A lightbox dialog is a modal window spawned by the main web page or application.

The lightbox-dialog is fully responsive. On large screens it will be aligned to the center of the screen; on small screens at the bottom. Small screens display an additional "handle" button, used to expand the dialog height.

The lightbox scales vertically and adds scrollbars when content overflows the viewport.

If you want to add a previous button to the lightbox, add the icon button before the dialog heading tag.

To have a wider lightbox add lightbox-dialog--wide to the dialog

On small screens, a wide lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog

To have a thinner lightbox add lightbox-dialog--narrow to the dialog

To have a large lightbox add lightbox-dialog--large to the dialog

On small screens, a large lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog

Any lightbox can be transitioned in and out, using the lightbox-dialog__window--animate and lightbox-dialog--mask-fade modifiers. On large screens, animate will fade in and on small screens the panel will slide in from the bottom.

The default fade duration is 16ms.

Call to action buttons can be placed in an optional footer section. They will be aligned to the end of the horizontal axis by default.

An image may be added to the lightbox header for a more expressive experience. Image will be cropped to a hardcoded height as per design standards.

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="dialog dialog--no-mask"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window lightbox-dialog__window--full">
    <div class="lightbox-dialog__header">
      <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>Lorem ... 1</p>
      <p>Lorem ... 2</p>
      <p>(you get the idea)</p>
      <p>Lorem ... n</p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--narrow"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--large"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--mask-fade"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window lightbox-dialog__window--animate">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <button
        aria-label="Go back"
        class="icon-btn lightbox-dialog__prev"
        type="button"
      >
        <svg
          aria-hidden="true"
          class="icon icon--chevron-left-16"
          height="16"
          width="16"
        >
          <use href="#icon-chevron-left-16" />
        </svg>
      </button>
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--wide"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <button
        aria-label="Go back"
        class="icon-btn lightbox-dialog__prev"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-chevron-left-16" />
        </svg>
      </button>
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="large-text-1 lightbox-dialog__header">
      <h2 class="large-text-1 bold-text" id="lightbox-dialog-title">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="lightbox-dialog__footer">
      <button class="btn">Button 1</button>
      <button class="btn">Button 2</button>
      <button class="btn">Button 3</button>
    </div>
  </div>
</div>

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--expressive"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div
      class="lightbox-dialog__image"
      style="background-image: url(src/routes/static/img/tb-landscape-pic.jpg)"
    />
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="lightbox-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>