<button type="button" class="slds-button slds-button_brand" data-toggle="modal" data-target="#myModal">Open Modal</button>
                        
<div id="myModal" class="demo-only" style="height: 24rem;">
    <section role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal" >
      <div class="slds-modal__container">
        <header class="slds-modal__header slds-theme_error slds-theme_alert-texture">
          <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" />
            </svg>
            <span class="slds-assistive-text">Close</span>
          </button>
          <h2 class="slds-text-heading_medium" id="prompt-heading-id">Service Unavailable</h2>
        </header>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
          <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
            quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
        </div>
        <footer class="slds-modal__footer slds-theme_default">
          <button class="slds-button slds-button_neutral" data-dismiss="modal">Okay</button>
        </footer>
      </div>
    </section>
    <div class="slds-backdrop"></div>
  </div>