Simple Modal Overlay with Keyboard Focus

  •  

Create a Freeform on the page, or a container in your template file with the class of 'alertBox'. ('alertBox' is a class becaue I used in on a Freeform block in Titan. This code is not designed to work with multiple modals (yet).) See this in action here when you click to "Donate Now" https://ccon-dev.titanclient.com/CCON/Alumni--Friends/Giving.htm

Don't forget to create your custom trigger to show the modal. The js below creates a couple elements so that it is completely removed from the Titan user in the case that it's a Freeform block on a page.  https://codepen.io/NWSShim/pen/zLKdqG

JS:

                
            $(document).ready(function () {
                if($('.alertBox').length){
                    $('.alertBox').wrapInner('<div class="alertBoxInner" tabindex="-1" />');
                    $('.alertBoxInner').append('<input onclick="NWS.Donations.linkOut()" type="button" value="Continue" /><p class="close" tabindex="0"><span class="fa fa-close"><span class="screenReaderOnly">Close</span></span></p>');
                    $('.alertBox .alertBoxInner .close').on('click',function(){
                            $('.alertBox').hide();
                    });
                    
                    $('.alertBox .alertBoxInner .close').keydown(function (event) { // accessibility - enter key - to close modal on close button
                        var currentElement = $(this);
                        var keycode = (event.keyCode ? event.keyCode : event.which);
                        if (keycode == '13') { 
                            $('.alertBox').hide();
                        }
                    });
                    $('.alertBox .alertBoxInner').keydown(function (event) { // accessibility - esc key - to close modal
                        var currentElement = $(this);
                        var keycode = (event.keyCode ? event.keyCode : event.which);
                        if (keycode == '27') { 
                            $('.alertBox').hide();
                        }
                    });
                    $('.alertBox .alertBoxInner').on('focusout',function (e) { // close modal when focused moved outside top nav
                        if($(this).has(e.relatedTarget).length === 0) {
                            $('.alertBox').hide();
                        }
                    }); 
                }
                
            });
            

CSS:

/* Alert Box */
.TitanBlock.alertBox{
    background-color:rgba(0,0,0,0.7);
    display:none;
    height:100%;
    left:0;
    overflow:auto;
    position:fixed;
    top:0;
    width:100%;
    z-index:9998;
}
.alertBox .alertBoxInner {
    background-color:rgba(255,255,255,1);
    margin: 25px 0;
    padding:6rem 5rem 4rem;
    position: fixed;
    width:100%;
    overflow: auto;
    max-height: 80%;
    z-index:9999;
    top:40%;
    left:50%;
    -webkit-transform:translateY(-40%) translateX(-50%);
    -moz-transform:translateY(-40%) translateX(-50%);
    -ms-transform:translateY(-40%) translateX(-50%);
    -o-transform:translateY(-40%) translateX(-50%);
    transform:translateY(-40%) translateX(-50%);
        -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.alertBox .alertBoxInner .close:hover,.alertBox .alertBoxInner .close:focus,.alertBox .alertBoxInner .close:active {
    color:var(--color-brand-primary-hover);
}
.alertBox .alertBoxInner .close {
    cursor:pointer;
    position:absolute;
    font-size:3rem;
    right:2rem;
    top:1rem;
}

@media (min-width:1200px) {
    .alertBox .alertBoxInner {max-width:60rem;}
}
© 2017 Northwoods - all rights reserved.
top