In this lesson we'll be creating a bootstrap model.
A model is a dialog box that pops up on top of the current page.
The model can contain an alert or any other type of content.
This example illustrates how a model works.
When we click the launch button we can see the model appears with a section for a header and some content.
Another feature is that it fades out the content behind the model to exit the model.
We can click anywhere outside the model or press the close button
to create a model restart by making a button the button must have a data toggle attribute set to model
it must also have a data target attribute that points to the idea of the modal div which will create
in just a second.
We'll be calling this model div Model 1
Now go ahead and make a divide and set the class to model and feed set the set the modal I.D. to the
same value as in the data target attribute.
So if you recall we just named the data target attribute Model 1 so set the idea to model 1 and these
values are case sensitive.
So make sure it's an exact match.
The model class identifies the content of a div as a model the feed class adds a phase transition effect
when the model is launched and closed.
You can see that when we open it it fades in and fades out.
Next we create another div and set the class to modal dialog the modal dialog class sets the proper
width in margin of the modal.
Now we create another div with the class set to modal content this class styles the modal including
the border in background color.
Inside this div we create a div with the class set to modal header.
This styles the header of our model.
Next we have a button element with a class set to close and data dismiss attribute set to modal this
button syntax is for the X at the top left court at the top right corner of the model located here the
closed class styles the closed button the data dismiss attribute closes the modal we then have our header
inside the H inside an H for element with the class set to modal title
the modal title class styles the header content
next we have a div with the class set to modal body.
This class styles the body content of the model.
So what you see displayed here.
Lastly we have a div with the class set to modal footer the modal footer class styles the footer content
of the modal.
We've also included a standard button in the footer with a data dismiss attribute and this again will
close the button when clicked
and so that's all there is to it.
Once you finish typing in your code you just save your file and refresh your browser and your model
should work.