Question

I'm using simplemodal OSX in a project and I want the modal popup to close when the user clicks outside of the popup. I use the following code where I have set overlayClose to true, but that doesn't work. It works fine with the X button, but not when clicked outside;

    $("#osx-modal-content").modal({
                autoPosition: true,
                autoResize: false,
                overlayId: 'osx-overlay',
                containerId: 'simplemodal-container',
                closeHTML: null,
                closeByEscape: true,
                setEvent: 'click',
                closeByDocument: true,
                overlayClass: '',
                minHeight: 80,
                opacity: 65, 
                position: ['72px',],
                overlayClose: true,
                onOpen: OSX.open,
                onClose:OSX.close

            });

updated: added the HTML

<!-- modal content -->
<div id="osx-modal-content">

    <div id="osx-modal-data">

        <div id="simplemodal-container" class="simplemodal-container">
            <div id="modal-placeholder" class="simplemodal-data" style="display: block;">


            </div>

        </div>

    </div>
</div>
Was it helpful?

Solution

You can try this, on click on the document (safe method for IE), call the $.modal.close() function:

$(document).on('click', function(){
   if($('#osx-modal-content').is(':visible')){
     $.modal.close()
   }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top