WebMD Ignite DX Engine

Modals 

<a href="#sampleModal" class="hgm-button hgm-modal-trigger">Open Sample Modal</a>

<br><br><br>

<div id="sampleModal" class="hgm-modal" aria-labelledby="sampleModal" tabindex="-1" aria-describedby="hgm-modal__wrapper" role="alertdialog" aria-modal="true">
    <a href="#" aria-label="Close">Dismiss Modal</a>
    <div class="hgm-modal__wrapper">
        <a href="#" title="Close" class="hgm-modal__close">Close <i class="fas fa-times"></i></a>
        <div class="hgm-modal__body">
            <h3>Modal title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </div>
</div>

<a href="#anotherSampleModal" class="hgm-button hgm-modal-trigger">Open Another Sample Modal</a>

<br><br><br>

<div id="anotherSampleModal" class="hgm-modal" aria-labelledby="anotherSampleModal" tabindex="-1" aria-describedby="hgm-modal__wrapper" role="alertdialog" aria-modal="true" data-bg-hex="0080FF" data-bg-alpha="65">
    <a href="#" aria-label="Close">Dismiss Modal</a>
    <div class="hgm-modal__wrapper">
        <a href="#" title="Close" class="hgm-modal__close">Close <i class="fas fa-times"></i></a>
        <div class="hgm-modal__body">
            <h3>Another Modal title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </div>
</div>
 
<a href="#sampleModal" class="hgm-button hgm-modal-trigger">Open Sample Modal</a>

<br><br><br>

<div id="sampleModal" class="hgm-modal" aria-labelledby="sampleModal" tabindex="-1" aria-describedby="hgm-modal__wrapper" role="alertdialog" aria-modal="true">
    <a href="#" aria-label="Close">Dismiss Modal</a>
    <div class="hgm-modal__wrapper">
        <a href="#" title="Close" class="hgm-modal__close">Close <i class="fas fa-times"></i></a>
        <div class="hgm-modal__body">
            <h3>Modal title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </div>
</div>

<a href="#anotherSampleModal" class="hgm-button hgm-modal-trigger">Open Another Sample Modal</a>

<br><br><br>

<div id="anotherSampleModal" class="hgm-modal" aria-labelledby="anotherSampleModal" tabindex="-1" aria-describedby="hgm-modal__wrapper" role="alertdialog" aria-modal="true" data-bg-hex="0080FF" data-bg-alpha="65">
    <a href="#" aria-label="Close">Dismiss Modal</a>
    <div class="hgm-modal__wrapper">
        <a href="#" title="Close" class="hgm-modal__close">Close <i class="fas fa-times"></i></a>
        <div class="hgm-modal__body">
            <h3>Another Modal title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </div>
</div>
 
/* No context defined. */
  • Handle: @modals
  • Preview:
  • Filesystem Path: assets/hg-mercury-theme-engine/styleguide/02-blocks/modals/modals.hbs

Customizaton via Data Attributes

Use data attributes directly on the modal to change the visual behavior of the modal; the following data attributes are currently in use:

  • data-bg-hex - set the hex value of the background color of the modal window; takes a hexadecimal string value, hashtag optional
  • data-bg-alpha - set the transparency of the modal window background; works in conjunction with the bg-hex attribute