डायलॉग ओवरले के पीछे छिपा हुआ था जब मॉडल: एएसपीनेट

Question

में जेक्वायरी डायलॉग पर सच है मैं कुछ jQuery संवाद विकसित कर रहा हूं और पाया कि जब मैं मॉडल सेट करता हूं तो संवाद छुपा हुआ था। मॉडल सेट करते समय: झूठी, मैंने पाया कि सब कुछ अपेक्षित काम करता है। उम्मीद है कि कोई मेरी मदद करे।

<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" /> 

<div id="dialog"> 

<h1>Test</h1> 
    <asp:Button ID="btnClickfromDialog" runat="server" Text="Button" /> 

</div> 

$(function() { 
    $("#btnOpendialog").click(function (e) { 
     $("#dialog").dialog("open"); 
     return false; 
    }); 

    $("#dialog").dialog({ 
     height: 200, 
     modal: true, 
     autoOpen: false, 
     open: function() { 
      $(this).parent().appendTo($("form:first")); 
     }        
    }); 
}); 

Answer 1

मैंने इसे ठीक किया। ऐसे मुद्दे नहीं हैं जो इस मुद्दे के बारे में शिकायत कर रहे हैं। यह सिर्फ मैं हूँ? वैसे भी, यहां मैंने इसे कैसे तय किया है। जब आप जानते हैं कि काफी सरल है।

.ui-widget-overlay 
{ 
     z-index: 0; 
} 

Answer 2

क्या आप अपने पर्यावरण के बाहर इस मुद्दे को फिर से बनाने के लिए जेएसफ़िल्ड बना सकते हैं?

तो जैसे एक दस्तावेज तैयार खंड के अंदर अपने जावास्क्रिप्ट रखो,:

$(document).ready(function() { 
// Your javascript here... 
}); 

बदलें btnOpendialog एक non-ASP.NET सर्वर नियंत्रण होने के लिए यदि नहीं, तो यहाँ मेरे सिर के ऊपर से कुछ विचार कर रहे । चूंकि यह सब jquery संवाद खोलता है, इसलिए सर्वर नियंत्रण होने की आवश्यकता नहीं है। इसे इस पर बदलें:

<input type="button" id="btnOpendialog" value="Button" /> 

Answer 3

आप इस तरह appendTo का उपयोग कर बंद करो और नया संवाद विकल्प "appendTo"

इस तरह उपयोग करने की आवश्यकता:

$(".selector").dialog({ appendTo: "#someElem" }); 

jQuery-ui प्रलेखन से लिया http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

मैंने स्वीकार्य उत्तर की कोशिश की और यह कुछ स्थितियों में काम करने के लिए दिखाई दिया, लेकिन दूसरों को नहीं। इसी विचार का उपयोग करना, इस कोड को मैं इस कोड के साथ आया था ...

.ui-dialog { z-index: 9999 !important; }

... जो तथ्य यह है कि .ui-widget-overlay की z- सूचकांक 9998 है पर आधारित है।

साथ ही, समस्या जहां ओवरले अपने पृष्ठ की पूरी ऊंचाई को कवर नहीं करता (.ui-widget-overlay के रूप में केवल 1000% की ऊंचाई है) ठीक करने के लिए, मैं इस के साथ आया था:

.ui-widget-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

Answer 5

सभी मैं z-index:1ui-dialog पर लागू किया गया था। इस काम को करने के लिए कोई ui-widget-overlay पर लागू हो सकता था।

मैं इसे 'jquery', 'jquery-ui-core', 'jquery-ui-dialog' स्क्रिप्ट सहित वर्डप्रेस में कर रहा हूं। यहाँ मेरी प्रासंगिक सीएसएस है:

.ui-widget-overlay {  
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    background: #aaaaaa; 
    opacity: 0.3; 
}  

.ui-dialog {  
    background-color: #FFFFFF;  
    overflow: hidden; 
    z-index:1; 
}