2009-08-28 8 views
16

मुझे पॉपअपड्रैगहैंडल कंट्रोल आईडी संपत्ति सेट होने पर स्क्रीन के केंद्र में मॉडेलपॉपअप एक्स्टेंडर को पोजीशन करने में समस्या है (इस संपत्ति के बिना यह ठीक काम करता है)।स्क्रीनिंग समस्या के केंद्र में स्थिति AJAX ModalPopupExtender

ModalPopupExtender स्क्रीन के केंद्र में स्थित नहीं है। मैं सोचता क्या कारण समस्या पृष्ठ के सीएसएस लेआउट कारण है जब मैं उसे निष्क्रिय, पॉपअप स्क्रीन के केंद्र में तैनात (मुझे समझ में नहीं क्यों पेज के सीएसएस ModalPopupExtender को प्रभावित करता है केवल जब यह है PopupDragHandleControlID संपत्ति सेट कर दिया जाता है)

thepage :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <link href="layout.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <div id="header"> 
    </div> 

    <div id="container"> 
     <div id="center" class="column">      

      <div id="centercolcontent" class="centercolcontent">  
      <asp:ScriptManager ID="ScriptManager1" runat="server"> 
     </asp:ScriptManager> 


     <asp:UpdatePanel ID="UpdatePanel1" runat="server" > 
      <ContentTemplate> 
       <asp:Button ID="btnShowPopup" runat="server" Text="Open" /> 
       <asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" style="display: none;"> 
        <cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup" 
           PopupControlID="pnlUploader" CancelControlID="btnCancel" 
           BackgroundCssClass="modalBackground" 
           PopupDragHandleControlID="pnlUploader" RepositionMode="RepositionOnWindowResize" /> 
        <div id="pnlDragMe" class="pnlDragMe"> 
         Image Uploader 
        </div>  

        <div class="upload" id="upload">    
         <div id="status" class="info"> 
          Please select a file to upload 
         </div> 
         <div class="commands">  
         <asp:Button ID="btnUpload" runat="server" Text="Upload" 
          OnClientClick="javascript:onUploadClick()" /> 
         <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> 
         </div>   
        </div>          
       </asp:Panel>  

      </ContentTemplate> 
     </asp:UpdatePanel> 
      </div> 

     </div> 

     </div>    
     <div id="left" class="column"> 
     </div> 

     <div id="right" class="column">       
     </div>   

    <div id="footer"> 

    </div> 




    </div> 
    </form> 
</body> 

</html> 

सीएसएस:

body 
{ 
    min-width: 630px; 
} 

#container 
{ 
    padding-left: 200px; 
    padding-right: 150px; 
} 

#container .column 
{ 
    position: relative; 
    float: left; 
} 

#center 
{ 
    padding: 0px 0px; 
    width: 100%; 
} 

#left 
{ 
    width: 200px; 
    padding: 0 0px 0 0; 
    right: 200px; 
    margin-left: -100%; 
} 

#right 
{ 
    width: 130px; 
    padding: 0 10px; 
    margin-right: -100%; 
} 

#footer 
{ 
    clear: both; 
} 


* html #left 
{ 
    left: 150px; /* RC fullwidth */ 
} 

/*** Equal-height Columns ***/ 

#container 
{ 
    overflow: hidden; 
} 

#container .column 
{ 
    padding-bottom: 1001em; /* X + padding-bottom */ 
    margin-bottom: -1000em; /* X */ 
} 



* html body 
{ 
    overflow: hidden; 
} 

* html #footer-wrapper 
{ 
    float: left; 
    position: relative; 
    width: 100%; 
    padding-bottom: 10010px; 
    margin-bottom: -10000px; 
    background: #FFF; /*** Same as body background ***/ 
} 



body 
{ 
    margin: 0; 
    padding: 0; 
} 

#header, #footer 
{ 
    font-size: large; 
    text-align: center; 
    padding: 0.3em 0; 
} 

#left 
{ 
    /*background: #66F;*/ 
} 

#center 
{ 
    background: #DDD; 
} 



.modalBackground 
{ 
    background-color: Gray; 
    filter: alpha(opacity=70); 
    opacity: 0.7; 
} 

उत्तर

-1

आशा इस दो तरीकों से प्राप्त किया जा सकता।

  • नीचे की तरह एक सीएसएस वर्ग संपत्ति लिखें और ModalPopupExtender में वर्ग के नाम कहते हैं।

सीएसएस:

.hcenter{margin:0 auto; width:200;} /* I have given a sample width you give the width of your popup */ 

कोड:

<asp:Panel ID="pnlUploader" runat="server" CssClass="hcenter" style="display: none;"> 
    <cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup" 
     PopupControlID="pnlUploader" CancelControlID="btnCancel" 
     BackgroundCssClass="modalBackground" 
     PopupDragHandleControlID="pnlUploader" 
     RepositionMode="RepositionOnWindowResize" /> 

...

  • पैनल में HorizontalOffset संपत्ति की कोशिश करो।
+1

इससे मदद नहीं मिली। और केवल क्षैतिज एलाइन संपत्ति है और यह पैनल की सामग्री के लिए है। – dani

4

एक्स और ModalPopupExtender के y गुण का प्रयोग करें।

+0

यह वही था जो मुझे चाहिए था! धन्यवाद @ Xs10tial! – MikeC

+0

यह सही उत्तर है, ty –

0

यह मुझे मेरे मामले के लिए काम करने के लिए फ्रिकिन युग ले गया, लेकिन अंत में मुझे पैनल की ऊंचाई को 100% से बढ़ाकर पैनल की तुलना में एक निश्चित ऊंचाई तक बदलना था।

<asp:Panel ID="pnlUploader" Width="500px"... 

मेरे पास पैनल के बाहर मेरा विस्तारक भी था लेकिन संदेह है कि क्या मायने रखता है। AjaxControlToolkit पसंदीदा नहीं है!

-1
.panel 
{ 
    position: absolute; 
    top: 50%; 
    left:50%; 
} 


<asp:Panel id ="pnlUploader" CssClass="panel"> 
+0

यह काम नहीं कर रहा है .. :( –

1

मुझे पता है कि यह पुराना है, लेकिन अभी तक कोई जवाब नहीं है ... तो ठीक है?

वैसे भी ... सुनिश्चित करें कि पैनल मुख्य पृष्ठ div/panel से अलग है। यह उस स्थिति को सेट करने के लिए विंडो के रूप में उपयोग कर रहा है।

0

ModalPopupExtenderPanelPopupControlId को Panel घोषित करने वाले div के अंदर केंद्रित PopupControlId दिखाता है। तो ModalPopupExtender को रखने का प्रयास करें जहां आपने इसे परिभाषित किया है, और अपने कंटेनरों से पॉपअप Panel को बाहर ले जाने का प्रयास करें (यहां तक ​​कि UpdatePanel में से)। इससे मेरा काम बनता है।

शुभकामनाएं।

0
#ModalPopUp 
{ 
    Position:relative; 
    Height:400px; 
    Width:400px; 
    Margin-left:auto; 
    Margin-right:auto; 
    } 

यह आपके पॉपअप को आपके पृष्ठ के केंद्र में रखना चाहिए। फिर बस सीडीएल को मोडलबैकग्राउंड के लिए सेट करें और आपको ठीक होना चाहिए।

टॉम

15

मोडल पॉपअप पैनल एक पूर्ण स्थिति दिया जाता है। तो इसे एक तत्व के अंदर होना जरूरी है जिसमें गैर स्थैतिक स्थिति है। इस मामले में, मैं चाहता हूं कि यह पृष्ठ पर केंद्रित हो, इसलिए मैंने इसे एक तत्व के अंदर रखा है (इस मामले में एक अद्यतन पैनेल लेकिन इससे कोई फ़र्क नहीं पड़ता कि यह किस प्रकार का तत्व है) जिसमें की इनलाइन शैली है: निश्चित; बाएं: 0; शीर्ष: 0

<asp:UpdatePanel ID="updProductPopup" runat="server" style="position:fixed;left:0;top:0;"> 
<contenttemplate> 

    <act:ModalPopupExtender ID="mpeProduct" runat="server" BackgroundCssClass="modalPopupBackground" BehaviorID="behaviourModalPopup" OkControlID="btnMpClose" PopupControlID="pnlModalPopup" PopupDragHandleControlID="pnlMpHandle" TargetControlID="btnMpHidden"> 
    </act:ModalPopupExtender> 

    <!-- pnlModalPopup MUST have inline style display:none --> 
    <asp:Panel ID="pnlModalPopup" runat="server" CssClass="modalPopup" style="display:none;"> 
     <asp:Panel runat="server" ID="pnlMpHandle" CssClass="modalPopupDragHandle"> 
      Panel Header 
     </asp:Panel> 
     <asp:Panel runat="server" ID="pnlMpContent">Here's my content</asp:Panel> 
     <p class="modalPopupClose"> 
      <a id="btnMpClose" href="#" class="custom-button">Close</a> 
     </p> 
    </asp:Panel> 
    <asp:Button ID="btnMpHidden" runat="server" Text="Button" CssClass="modalPopupHiddenButton" /> 

</contenttemplate> 

मैं जानता हूँ कि मूल प्रश्न काफी पुराना है, लेकिन मैं इसे खोजने के बिना बहुत समय बिताया इस समस्या का जवाब की तलाश में है, और इस सवाल का गूगल पर काफी अत्यधिक ऊपर आता है, इसलिए उम्मीद है कि यह किसी और को कुछ समय बचाएगा।

+2

बहुत बढ़िया समाधान! मेरे लिए हल किया गया (मैंने अपडेटपेनल के बजाय एक div का उपयोग किया) –

+0

इस के लिए धन्यवाद! सही काम करता है! यह उत्तर हल के रूप में चिह्नित किया जाना चाहिए! – Haris

+0

भयानक। अभी भी जादू की तरह काम करते हैं। हालांकि, अपडेट पैनेल ने मेरे लिए एक लंबवत केंद्र नहीं किया है, मैं एक div का उपयोग कर समाप्त हुआ। – SollyM

-1

डिफ़ॉल्ट रूप से पैरामीटर एक्स, वाई और रिपोजिटियो एनएमओडी निकालें, जब आप स्क्रॉल करते हैं तो केंद्र स्थिति भी ले जाती है।

1

मुझे पता है कि यह एक बहुत पुराना सवाल है, लेकिन यहां तक ​​कि एक समाधान की तलाश में भी, मैंने सोचा कि मैं पोस्ट कर सकता हूं कि मैंने आखिरकार इस मुद्दे को कैसे हल किया, दूसरों की मदद के लिए।

बस अपने पैनल में है कि शैली का उपयोग करें:

<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" /> 

"महत्वपूर्ण" खंड modalpopupextender से सभी अन्य सेटिंग्स पर आ जाएगी। प्रतिशत मानक बूटस्ट्रैप से मानक के रूप में लिया जाता है। "प्रदर्शन" पृष्ठ को लोड करते समय आपके पैनल को दिखाने के लिए भी रोक देगा।

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