How to load a modal in a website, bootstrap modal, modal not working, prevent modal from closing on backdrop click, bootstrap modal example

How to load a modal in a website

At times when we want to perform an activity like a new entry or edit details on a web page, we are forced to add an anchor link that opens another page which you will use to input data for a new entry. This you find creates a lot of files in your web server that can be avoided by using other features and tools that are available in web development. To prevent creating many files in the webserver, we use modals.

Modals are child windows that are layered over the parent window meaning they appear on top of the already existing content. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. They are dialog boxes or pop-up windows that are used to provide information or ask a user to perform certain tasks before leaving the page. Modals offer a lightweight, multi-purpose JavaScript popup that’s customizable and responsive.

In this article, we shall cover how to load a modal in a website, how to change the size of the modal to either bigger or smaller, and also prevent it from closing unless the close button is clicked. We shall also cover how to add elements inside the modal so that you can understand how to load forms in modals.

A modal is made up of three sections, that is, the header, body, and footer which all serve their distinct functions. In the header, the title of the modal is displayed here while in the body the contents you are displaying are added here while the footer contains the buttons.

How to load a modal

Modals are part of JavaScript and are supported by bootstrap so to use them you must initialize bootstrap and javascript scripts.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>

Next, mostly modals appear as a result of triggers that is, by a click of a button. For example, a button for add new can be clicked and the modal will appear. For the modal to appear, the button or anchor link must define some properties in it

data-toggle attribute tells the link that it expects a modal, for example, data-toggle="modal"

data-target attribute defines the element that will be opened, for example, data-target="#Modal1", means that the modal with id Modal1 will be displayed when the link or button is clicked

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#Modal1"> Open Modal </a>

When the above link is clicked it should open a modal which is defined in the data-target. An example of a modal structure is as shown below

<!—Modal example -->

  <div class="modal fade" id="Modal1" role="dialog">

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

         <!-- Modal header-->

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Modal Header</h4>

        </div>

           <!-- Modal header-->

        <div class="modal-body">

          <p>Some text in the modal.</p>

        </div>

              <!-- Modal content-->

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

     

    </div>

  </div>

The full code for the above modal will be

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Modal Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="container">

  <h2>Bootstap Modal Example</h2>

  <!-- Trigger the modal with a button -->

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#Modal1"> Open Modal </a>

  <!—Modal example -->

  <div class="modal fade" id="Modal1" role="dialog">

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

         <!-- Modal header-->

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Modal Header</h4>

        </div>

           <!-- Modal header-->

        <div class="modal-body">

          <p>Some text in the modal.</p>

        </div>

              <!-- Modal content-->

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

     

    </div>

  </div> 

</div>

 

</body>

</html>

When you run the above code and click the open modal button, the below modal will be displayed

How to load a bootstrap modal in a website

The modal loaded above is the default modal. To change the size of the modal to either small or large, in the class that has modal-dialog, you can either add modal-sm for small modals or modal-lg for large modals. The size of the modal is determined by the number of items you want to display inside the modal.

An example of a small modal is shown below

How to load a bootstrap modal in a website

The below screenshot shows an example of a large modal

How to load a bootstrap modal in a website

How to prevent modal from closing on backdrop click

For the above modal, when you click an area outside the modal, the modal closes itself automatically. To prevent this we will need to add two attributes in the anchor link or button that opens the modal. The data-backdrop="static" and  data-keyboard="false"

The data-keyboard="false" attribute prevents the modal from closing when you use the escape button in your keyboard.

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#Modal1"> Open Modal </a>

Else, you can define a script like below

<script>

$('#Modal1).modal({

backdrop: 'static',

 keyboard: false

 })

</script>