Bootstrap Modals

Introduction

Modals are used in most common scenarios in almost every web application. We usually implement it writing every piece of code with the help of Javascript, but with Bootstrap, this is possible with comparatively lesser code, which in turn also provides responsiveness to run fantastically across all different devices with almost no styling concerns.

Implementation

1. Create the modal trigger

  • data-toggle=”modal” – opens the modal window
  • data-target=”#myModal” – points to the modal div with id myModal

2. Create the modal


  • .modal-dialog – sets the proper width and margin of the modal.
  • role=”dialog” – improves accessibility for people using screen readers.
  • .fade – adds a fading transition effect.
  • .modal – identifies the content of <div> as a modal and brings focus to it.
  • The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (“myModal”).

3. Create the modal content

  • .modal-content styles the modal accordingly – which contains the modal’s header, body, and footer.

Demonstration

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.