2012-02-19 25 views
25

मैं ब्लॉकयूआई को एक मोडल संवाद पर काम नहीं कर सकता।
मैं z- सूचकांक मुद्दों के बाद देखने के लिए कोशिश की, लेकिन सफलता नहीं मिली ...jQueryUI मोडल संवाद पर ब्लॉकुई

अपने वेब पेज में, यहाँ सिर है:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script> 
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" /> 

और शरीर:

<div id="dialog_test" title="Test"> 
    TEST 
</div> 

<a href="#" id="go">GO</a> 

<script> 
    $(function() { 
     $("#dialog_test").dialog({ 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       "Cancel": function() { 
        $(this).dialog("close"); 
       }, 
       "Ajax": function() { 
        $.ajax({ 
         "url" : "http://jquery.malsup.com/block/wait.php", 
         "success" : function(json) { 
          $("#dialog_test").dialog("close"); 
         } 
        }); 
       } 
      } 
     }); 

     $("#go").click(function(event) { 
      event.preventDefault(); 
      $("#dialog_test").dialog("open"); 
     }); 

    }); 

    $(document) 
     .ajaxStart(function() { 
      $.blockUI({ 
       theme: true 
      }) 
     }) 
     .ajaxStop($.unblockUI); 

</script> 

कोई उपाय?

उत्तर

43

आप यह निर्दिष्ट नहीं करते कि आपने जेड-इंडेक्स के साथ क्या प्रयास किया है। साथ ही एक option for specifying a z-index रूप

// z-index for the blocking overlay 
baseZ: 1000, 

jQuery यूआई संवाद:

blockUI प्लगइन संदेश यह बनाता है (documentation) की z- सूचकांक को बदलने के लिए एक विकल्प है। उसके डिफ़ॉल्ट मान 1000 है तो तुम BlockUI विकल्प के लिए अधिक संख्या में स्थापित करने के लिए, मान लें कि 2000 करते हैं:

$.blockUI({ 
    theme: true, 
    baseZ: 2000 
}) 

DEMO

+1

हाँ, यह काम करता है! धन्यवाद। –

+0

हां, जेड-इंडेक्स ब्लॉकयूआई के लिए चाल करेगा। – Gunasegar

2

अपने जवाब के लिए धन्यवाद डिडिएर, यह पटरी पर मुझे मिल में मदद की। आप देखेंगे कि डिडिएर के उत्तर में जेस्फ़िड पहली बार संवाद खोलने पर काम करता है लेकिन संवाद के नीचे दिखाई देने वाले ब्लॉकयूआई तत्वों में कोई और खुला और AJAX परिणाम होता है। डायलॉग को हर बार खुलने के लिए शीर्ष कुत्ते होने के लिए अपने जेड-इंडेक्स को पुनः संयोजित करना होगा।

मैं इस के आसपास दो संभव तरीके पाया है:

  1. 'destroy' संवाद जब यह बंद कर दिया है और इसे पुन: जब इसे खोला जाता है। पूरे यूआई को अवरुद्ध करने के बजाए
  2. , बस संवाद को अवरुद्ध करें। यह widget method का उपयोग किया जा सकता है, इस तरह:

    $(".selector").dialog("widget").block({ 
        theme: false, 
        message: '<h1>Wait for me please...</h1>', 
        css: { border: '3px solid #a00' } 
    }); 
    
+0

[अद्यतन डेमो] (http://jsfiddle.net/D8sr6/1/) @ didier-ghys –

संबंधित मुद्दे