Home/ Questions/Q 7657605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:04:25+00:00

I’m working with simple modal, and I’m trying to prevent the close on escape.

  • 0

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();
            });
        },
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();
            });
        },
    });
});
    • 0