Bootstrap Undismissable Modal - Html

Bootstrap is one of the most popular front-end web development frameworks. It provides a wide range of features and components, including modals. Modals are pop-up windows that allow users to focus on a particular task while graying out the rest of the screen. In this article, we will discuss the undismissable modal in Bootstrap using HTML.

What is an Undismissable Modal?

An undismissable modal is a pop-up window that cannot be closed by the user. It is used when a user needs to complete a certain action or fill in important information before being able to continue using the application. Undismissable modals can be annoying for users, so they should be used sparingly and only when absolutely necessary.

How to Create an Undismissable Modal in Bootstrap using HTML

1. First, we need to create a button that will trigger the modal. We can use the following HTML code:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Undismissable Modal
</button>

This code creates a button with the class btn btn-primary, which is styled using Bootstrap. The data-toggle="modal" and data-target="#myModal" attributes are used to trigger the modal.

2. Next, we need to create the modal window itself. We can use the following HTML code:

<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

This code creates the modal window. The id="myModal" attribute is used to link the modal to the button we created earlier. The role="dialog" attribute adds accessibility features to the modal. The data-backdrop="static" and data-keyboard="false" attributes are used to prevent the user from closing the modal using the keyboard or by clicking outside the modal window.

3. Finally, we can add some CSS to style the modal. We can use the following CSS code:

.modal {
  text-align: center;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

This code centers the modal vertically and horizontally on the screen.

Conclusion

Undismissable modals are useful in certain cases, but they should be used sparingly to avoid annoying the user. Bootstrap provides an easy way to create undismissable modals using HTML and CSS. With the code snippets provided in this article, you should be able to create your own undismissable modals in no time.