When you click on a product, the application should respond with the details of that product. For our example, we will use a dialog box to show the details of the clicked item.
First, we need to add a Bootstrap Modal dialog box to our HTML page.
A modal dialog box looks complicated, but it’s not. It’s broken up in to three sections: the header, the body, and the footer. We will add the HTML for all three at the same time, and then modify it.
Start by adding this HTML to your index.html
file, at the bottom after the last </div>
, but before the closing </body>
tag
<div class="modal fade" tabindex="-1" role="dialog" id="product-detail">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->