Hide modal window javascript

Question

So to show this modal I have the following code:

<button type="button" onclick="openModal(); return false;">A button</button>

and the javascript for this is:

<script type='text/javascript'>
function openModal(a)   
    {
        $.modal({
            content:  'Some content here',
            title: 'a title',
            maxWidth: 500,

        });
        win.closeModal();
    }

</script>

I need a function that will hide this. Can anyone give me some advice on how to do the hideModal() function which will hide the modal when I click anywhere on the screen?

Answer 1

With the modal open in the browser window, use the browser's console to try

  var modal;
    function btnsModal() {
        var btns = {
            'Close': function (win) {
                modal.closeModal()
            }
        }
        return btns;
    }

    function openModal(oLink, content) {
        var btn = btnsModal();
        modal = $.modal({
            buttons: btn
        });
    }

Answer 2

You can add "open" event to dialog, and then bind on click listener to it which will close the dialog if you click anywhere---

open: function(){
        jQuery('.ui-widget-overlay').bind('click',function(){
            jQuery('#ID_of_ur_dialog').dialog('close');
        })
    }

for hiding effect you can use "hide" option---

hide: "highlight"

Answer 3

This is dumb...

I fixed this with display none in css... It turns out I didn't thick it trough... I added the display none and a JS event that triggers the CSS upon clicking anywhere else in the page, except the modal.

Thank you very much for all your input guys! Really appreciate it!