https://www.nr.edu/js/modal.js

1// Get the modal
2// var modal = document.getElementById('myModal');
3
4// Get the button that opens the modal
5// var btns = document.getElementById("modalBtn");
6
7// Get the <span> element that closes the modal
8// var span = document.getElementsByClassName("close")[0];
9
10// When the user clicks the button, open the modal 
11// btn.onclick = function() {
12    // modal.style.display = "block";
13// }
14
15// When the user clicks on <span> (x), close the modal
16// span.onclick = function() {
17    // modal.style.display = "none";
18// }
19
20// When the user clicks anywhere outside of the modal, close it
21// window.onclick = function(event) {
22    // if (event.target == modal) {
23        // modal.style.display = "none";
24    // }
25// }
26(function ($) {
27
28
29$(document).ready(function() {
30    // When we click the button class...
31    $(document).on('click','.modalBtn', function(e){
32        e.preventDefault();
33        $('body').css('overflow','hidden');
34        //$('body').css('position','fixed');
35        var thisBtn = this.id; // get the id of the button
36        var thisModalID = thisBtn.slice(0, -3); // the id of the button ends in 'Btn'. Lets remove those characters to get the Modal ID
37        var thisModal = document.getElementById(thisModalID);
38        thisModal.style.display = "block";
39    }) 
40
41    // When the user clicks anywhere outside of the modal, close it
42    $(document).on('click', function(e) {
43            if ($(e.target).hasClass('modal')) {
44                $(e.target).hide();
45                $('body').css('overflow','scroll');
46                //$('body').css('position','inherit');
47            }
48        })
49
50    // When the user clicks on <span> (x), close the modal
51    $(document).on('click','.close', function(){
52        closeModals();
53    });
54
55    $(document).on('keydown', function(event) {
56        closeModals();
57    });
58
59    function closeModals() {
60        $( ".modal" ).css( "display", "none" );
61        $('body').css('overflow','scroll');
62        $('body').css('position','inherit');
63    }
64});
65})(jQuery);