Solution to: Why won’t by Bootstrap 3 modal dialog display?
Using the example from the Bootstrap 3 docs (I think — maybe it was another website), I set up a modal dialog on a web page:
|
1 2 3 4 5 6 7 8 9 |
<div class="modal fade" id="description" tabindex="-1" role="dialog" aria-labelledby="descriptionLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="descriptionLabel">Modal header</h3> </div> <div class="modal-body"> <p>Modal body text</p> </div> </div> |
When I clicked on the associated “a” tag, the screen dimmed but the dialog didn’t display.
Solution
Somehow I missed two crucial div tags:
|
1 2 |
<div class="modal-dialog"> <div class="modal-content"> |
So the final code looked like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="modal fade" id="description" tabindex="-1" role="dialog" aria-labelledby="descriptionLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="descriptionLabel">Modal header</h3> </div> <div class="modal-body"> <p>Modal body text</p> </div> </div> </div> </div> |
Problem solved!
