How it works…
In this recipe, we are using code from the example modal provided by the official Bootstrap website, at https://v4-alpha.getbootstrap.com/components/modal/#live-demo.
We alter the appearance of the sample modal by changing its SCSS and CSS properties. There is no JavaScript involved in this recipe.
We start off the recipe04-02.scss file by setting the .modal-dialog class to be 100% of the larger viewports.
We follow this up by setting the opacity to a high value of .98, which gives us a nice overlay effect with the content under the modal almost invisible. Changing the background color and/or this opacity setting might produce interesting results, which could be a further exercise as an extension of this recipe.
Finally, we ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access