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-toggledata attribute, which needs to be set tomodal. This tells the browser that this<button>is attached to a Modal component.The second is the
data-targetattribute, 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...