Coding a Modal dialog

Modals go by a number of different names; you may also know them as dialogs, popups, overlays, or alerts. In the case of Bootstrap, this component is referred to as a Modal and that is how I'll be referring to it throughout the book. A Modal is made up of two required pieces of code. The first is a button, and here's the basic code required to render it:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#firstModal"> 
  Open Modal 
</button> 

As you can see, this is a basic Button component with a few attributes added to it:

• The first is the data-toggle data attribute, which needs to be set to modal. This tells the browser that this <button> is attached to a Modal component.

• The second is the data-target attribute, which should be an ID. It doesn't really matter what you name this, I've called it #firstModal. It's important to note this ID name as it will be tied in later. Also make sure that the ID name is...