Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

This page shows some example usage of the <BsModal> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.

Simple modal

Use the bs-modal-simple component for Modals with a default layout

  @title="Simple Dialog"
  @onHidden={{action (mut modal1) false}}>
  Hi there


  @title="Simple Modal"
  @onSubmit={{action "submit"}}
  @onHidden={{action "close"}}
  Hi there

Custom markup

Use the bs-modal component for custom markup

  @onSubmit={{action "submit"}}
  @onHidden={{action (mut modal3) false}} as |modal|>
    <h4 class="modal-title">
      Custom Dialog
      <div class="badge">2</div>
    <input type="text" autofocus="autofocus">
    <BsButton @onClick={{action modal.close}}>Cancel</BsButton>
    <BsButton @type="danger">Delete</BsButton>
    <BsButton @type="success" @onClick={{action modal.submit}}>Save</BsButton>