How To Make Popup Modal For Bootstrap Template

Modal is a term for popup dialog on bootstrap template. To apply this, you need to apply bootstrap template and import bootstrap.min.js file. Go here to read how to apply bootstrap template in blogspot.

Next, apply the code. You can do this using Add a gadget then choose HTML/Javascript on Layout section on your blogger Dashboard or directly on Edit HTML on the Theme section.

First, you need a button for triggering the modal. Paste the following code:

<a class='btn btn-primary' data-target='#myModal' data-toggle='modal' href='#' role='button'>This is trigger button for modal</a>

Next, the body part of the modal. Paste the following code:

<!-- Modal -->
<div class='modal fade' id='myModal' role='dialog'>
  <div class='modal-dialog'>

<!-- Modal content-->
<div class='modal-content'>
  <div class='modal-header'>
<span style='text-align: center;'>Basic Modal</span>
<a class='close btn btn-danger btn-xs' data-dismiss='modal' type='button'><i class='fa fa-close'></i></a>
  </div>
  <div class='modal-body'>
<span style='text-align: center;'>Hi, I'm the basic Modal.</span>
  </div>
  <div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal' type='button'>Close</button>
  </div>
</div>

  </div>
</div>

---

Explanation

The green part on the trigger button can be changed to whatever you want. However, it must match the id of the modal.
The red part inside of the modal can be changed to whatever HTML you want.
The purple part is Font Awesome. The purpose only for symbolizing a close button. This need to import the Font Awesome file to your website. Read here to know how to do it.