Modals

Secondary window that pops up within a parent window to focus the user’s attention.


Standard Modal

    
      <div class="lmp-modal modal fade" id="ExampleOpenModal" tabindex="-1" aria-labelledby="ExampleOpenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="ExampleOpenModalLabel">Modal Title</h3>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, dolor!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn lmp-outline-secondary mr-2" data-dismiss="modal" aria-label="Close">Cancel</button>
          <a href="#" class="btn lmp-secondary">Submit</a>
        </div>
      </div>
    </div>
  </div>
  
    
  

Modal with error message

    
      <div class="lmp-modal modal fade" id="ExampleOpenModal" tabindex="-1" aria-labelledby="ExampleOpenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="ExampleOpenModalLabel">Modal Title</h3>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, dolor!</p>
        </div>
        <div class="modal-footer">
          <div class="lmp-modal-alert error">
            <strong>Model error message.</strong> Something went wrong while processing your request. Please try again later.
          </div>
          <button type="button" class="btn lmp-outline-secondary mr-2" data-dismiss="modal" aria-label="Close">Cancel</button>
          <a href="#" class="btn lmp-secondary">Submit</a>
        </div>
      </div>
    </div>
  </div>
  
    
  

Error Message - Small Modal

    
      <div class="lmp-modal modal" id="exampleErrorModal" tabindex="-1" aria-labelledby="exampleErrorModalHeading" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="exampleErrorModalHeading">Error Title</h3>
        </div>
        <div class="modal-body">
          Error Message
        </div>
        <div class="modal-footer">
          <button type="button" class="btn lmp-outline-secondary mr-2" data-dismiss="modal" aria-label="Close">Cancel</button>
          <button class="btn lmp-secondary">Action Button</button>
        </div>
      </div>
    </div>
  </div>
  
    
  

Error Message - Standard Modal - No Dismiss Button

    
      <div class="lmp-modal modal" id="exampleErrorModal" tabindex="-1" aria-labelledby="exampleErrorModalHeading" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="exampleErrorModalHeading">Error Title</h3>
        </div>
        <div class="modal-body">
          Error Message
        </div>
        <div class="modal-footer">
          <button class="btn lmp-secondary">Action Button</button>
        </div>
      </div>
    </div>
  </div>