Modal

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

<BsModalSimple
  @open={{modal1}}
  @title="Simple Dialog"
  @size="sm"
  @onHidden={{action (mut modal1) false}}>
  Hi there
</BsModalSimple>

Options

<BsModalSimple
  @open={{true}}
  @title="Simple Modal"
  @closeTitle="Ok"
  @submitTitle={{null}}
  @size=""
  @closeButton={{true}}
  @fade={{true}}
  @backdrop={{true}}
  @backdropClose={{true}}
  @onSubmit={{action "submit"}}
  @onHidden={{action "close"}}
  @renderInPlace={{true}}>
  Hi there
</BsModalSimple>

Custom markup

Use the bs-modal component for custom markup

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