jQuery यूआई संवाद: बाहर क्लिक करते समय संवाद बंद करने के लिए कैसे?

Question

docs में मुझे ऐसी जानकारी नहीं मिली।

विकल्पों ऐसे मामलों में संवाद को बंद करने के होते हैं:

1) धक्का Esc;

2) संवाद में "ठीक" या "बंद करें" बटन पर क्लिक करें।

लेकिन अगर बाहर क्लिक करें तो संवाद बंद कैसे करें?

धन्यवाद!

Answer 1

यहाँ गैर मोडल संवाद के लिए 2 अन्य समाधान कर रहे हैं:

तो संवाद गैर मोडल है विधि 1: विधि 1: http://jsfiddle.net/jasonday/xpkFf/

// Close Pop-in If the user clicks anywhere else on the page 
        jQuery('body') 
         .bind(
         'click', 
         function(e){ 
         if(
         jQuery('#dialog').dialog('isOpen') 
         && !jQuery(e.target).is('.ui-dialog, a') 
         && !jQuery(e.target).closest('.ui-dialog').length 
         ){ 
         jQuery('#dialog').dialog('close'); 
         } 
         } 
        ); 

गैर-मोडल संवाद विधि 2: http://jsfiddle.net/jasonday/eccKr/

$(function() { 
      $("#dialog").dialog({ 
       autoOpen: false, 
       minHeight: 100, 
       width: 342, 
       draggable: true, 
       resizable: false, 
       modal: false, 
       closeText: 'Close', 
        open: function() { 
         closedialog = 1; 
         $(document).bind('click', overlayclickclose); 
        }, 
        focus: function() { 
         closedialog = 0; 
        }, 
        close: function() { 
         $(document).unbind('click'); 
        } 



     }); 

     $('#linkID').click(function() { 
      $('#dialog').dialog('open'); 
      closedialog = 0; 
     }); 

     var closedialog; 

      function overlayclickclose() { 
       if (closedialog) { 
        $('#dialog').dialog('close'); 
       } 

       //set to one because click on dialog box sets to zero 
       closedialog = 1; 
      } 


    }); 

Answer 2

मैं ryanjeffords.com पर समाधान नहीं मिला:

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#dialog").dialog(); 

     $('.ui-widget-overlay').live("click",function(){ 
      $("#dialog").dialog("close"); 
     });  
    }); 
</script> 

Answer 3

एक ही समस्या का सामना करते हुए, मैंने एक छोटी प्लगइन बनाई है जो इसके बाहर क्लिक करते समय एक संवाद बंद करने में सक्षम बनाता है चाहे वह एक मोडल या गैर-मोडल संवाद हो। यह एक ही पृष्ठ पर एक या एक से अधिक संवाद का समर्थन करता है।

मेरे यहाँ वेबसाइट पर अधिक जानकारी: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

प्लगइन GitHub पर भी है: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside

लॉरेंट

Answer 4

यह मेरा समाधान है।

मैं उदाहरण

<div id="dialog1">Some content in here</div> 
<div id="dialog2">Different content in here</div> 
<div id="dialog3">And so on...</div> 

प्रत्येक div क्या उपयोगकर्ता साथ सूचना का आदान के आधार पर एक संवाद के रूप में खोला जाता है के लिए है। तो वर्तमान में सक्रिय एक को बंद करने में सक्षम होने के नाते, मैं यह करता हूं।

// This closes the dialog when the user clicks outside of it. 
$("body").on('click', '.ui-widget-overlay', function() { 
    if($("div.ui-dialog").is(":visible")) 
    { 
     var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id"); 
     if ($("#"+openDialogId).dialog("isOpen")) 
     { 
      $("#"+openDialogId).dialog('close'); 
     } 
    }   
}); 

Answer 5

तो संवाद मोडल है, तो open समारोह में कोड के इन 3 लाइनों पेस्ट जब आप अपने संवाद विकल्प बनाने के लिए:

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