Bootstrap 3 modal example with Jsfiddle

//Bootstrap 3 modal example with Jsfiddle

Bootstrap 3 modal example with Jsfiddle

Bootstrap is a versatile HTML, CSS and Javascript framework. It is designed to be mobile-first and uses a class structure that allows for easy and fast coding.

A modal is also called a popover (or sometimes popup). Some call it a lightbox as well though that is not technically correct.

This is a Bootstrap 3 modal example you can use to create modal popovers.

Modal code structure

A modal consists out of 3 elements:

  • A trigger
  • Modal code
  • Function code

The trigger is a link that calls the modal.

The modal code is what will be shown.

The functionality code is taken care of by Bootstrap and jQuery (so be sure both are loaded by your page).

The trigger

The modal trigger is an href that refers to the modal. It also gets a data identifier telling Bootstrap it triggers a modal. The code structure is:

<a data-toggle=”modal” href=”#modal”>Modal Trigger</a>

Where the href id the id=”” of the modal div. The link text can be anything.

The modal

This code is usually at the bottom of the page. It is not visible until the trigger is clicked. The code structure is a bit more complex than the trigger:

<div id=”modal” class=”modal fade”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<h4 id=”modal-label”>Header</h4>
</div>
<div class=”modal-body”>
<p>Content.</p>
</div>
</div> <!–modal-content–>
</div> <!–modal-dialog–>
</div> <!–modal–>

The id used at the top is the id used in the trigger. The modal fade classes tell Bootstrap and jQuery that we want the modal to have a fade effect.

Example code

As an example you can try this Jsfiddle.

<a data-toggle=”modal” href=”#HoastedModal” class=”btn btn-info”>Hoasted Modal</a>
<div id=”HoastedModal” class=”modal fade”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<h4 id=”modal-label”>Header</h4>
</div>
<div class=”modal-body”>
<p>Content.</p>
</div>
</div> <!–modal-content–>
</div> <!–modal-dialog–>
</div> <!–modal–>

By | 2018-07-24T14:48:21+00:00 April 29th, 2015|0 Comments