Making full-page modals

In this recipe, we will alter the behavior of the modal component, so as to have it completely cover the available screen space.

To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.

Upon opening the web page as explained in the preceding paragraph, you should see a large Click Me button that will trigger the modal, which will then appear and cover the entire viewport.

Getting ready

To get acquainted with the modal component in Bootstrap 4, visit https://v4-alpha.getbootstrap.com/components/modal/.

How to do it…

1. Open the empty recipe-04-02.ejs file, located in the chapter4/start/app folder.
2. Add the following code to it:

<div class="container">

 <div class="mt-5">
 <h1><%- title %></h1>
 <p><a href="https://v4-alpha.getbootstrap.com/components/modal...