waynegm / imgNotes

Extension of the jQuery imgViewer plugin to add markers and notes to the image
MIT License
99 stars 26 forks source link

dialog box should close when i clicked out side, not with close button #21

Closed santhu469 closed 7 years ago

waynegm commented 7 years ago

You can customise the behaviour for the note dialog by defining your own onShow callback. For instance, the examples include a case where tooltips are used as an alternative to a dialog box to show the notes.

waynegm commented 7 years ago

Use an onShow callback like this to get the desired behaviour:

onShow: function(ev, elem) {
    var $elem = $(elem);
    $('#NoteDialog').remove();
    return $('<div id="NoteDialog"></div>').dialog({
        modal: false,
        resizable: false,
        height: 300,
        width: 250,
        position: { my: "left bottom", at: "right top", of: elem},
        buttons: {
            "Close" : function() {
                $(this).dialog("close");
            }
        },
        open: function() {
//          Get the note text and put it into the textarea for editing
            $(this).html($elem.data("note"));
            $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide();
            var dlg = this;
            $(document).on('mousedown.mydialog', function(ev) {
                if ($(dlg).dialog('isOpen') && !$.contains($(dlg).dialog('widget')[0], ev.target)) {
                    $(dlg).dialog('close');
                }
            });
        },
        close: function() {
            $(document).off('mousedown.mydialog');
            $(this).dialog("destroy");
        }
    });
}
santhu469 commented 7 years ago

thank you. waynegm