Search code examples
javascriptjquerysimplemodal

escClose in simple modal


I'm working with simple modal, and I'm trying to prevent the close on escape. This says it should be simple, but this doesn't work for me, am I putting this in the wrong place?

$(document).ready(function(){
    $("#login_modal").modal({
        overlayCss: {
            backgroundColor: '#000',
        },
        containerCss: {
            height: 485,
            width: 385,
            backgroundColor: "#f6f6f6",
            border: '3px solid #d3d5d6',
            fontSize: '10pt',
            color: '#58595b',
            fontFamily: 'sans-Serif',
            fontWeight: '100',
            paddingLeft: 5,
            paddingTop: 5,
            opacity: .94,
            escClose: false,
        },
        onOpen: function (dialog) {
            dialog.overlay.fadeIn('slow');
            dialog.data.show(); 
            dialog.container.fadeIn('slow', function () {
                $('body').css('overflow', 'hidden');
            });
        },
        onClose: function (dialog){
            $('body').css('overflow', 'auto');
            dialog.container.fadeOut('200');
            dialog.overlay.fadeOut('200', function () {
                $.modal.close();
            });
        },
    });
});

Solution

  • Yes, escClose is in the wrong place - it's a parameter on the modal itself, not the containerCss array. You also have extra commas at the end of your overlayCss and containerCss property arrays. This sometimes causes issues in browsers. Try this;

    $(document).ready(function(){
        $("#login_modal").modal({
            escClose: false,
            overlayCss: {
                backgroundColor: '#000'
            },
            containerCss: {
                height: 485,
                width: 385,
                backgroundColor: "#f6f6f6",
                border: '3px solid #d3d5d6',
                fontSize: '10pt',
                color: '#58595b',
                fontFamily: 'sans-Serif',
                fontWeight: '100',
                paddingLeft: 5,
                paddingTop: 5,
                opacity: .94
            },
            onOpen: function (dialog) {
                dialog.overlay.fadeIn('slow');
                dialog.data.show(); 
                dialog.container.fadeIn('slow', function () {
                    $('body').css('overflow', 'hidden');
                });
            },
            onClose: function (dialog){
                $('body').css('overflow', 'auto');
                dialog.container.fadeOut('200');
                dialog.overlay.fadeOut('200', function () {
                    $.modal.close();
                });
            },
        });
    });