Расположение AJAX ModalPopupExtender в центре проблемы с экраном

Question

Расположение AJAX ModalPopupExtender в центре проблемы с экраном

У меня есть проблема с позиционированием ModalPopupExtender в центре экрана, когда его свойство PopupDragHandleControlID установлено (без этого свойства он работает нормально).

ModalPopupExtender не расположен в центре экрана. Я думаю, что причиной проблемы является CSS-разметка страницы, когда я отключаю ее, всплывающее окно располагается в центре экрана (я не понимаю, почему CSS страницы влияет на ModalPopupExtender, только когда установлено свойство PopupDragHandleControlID)

Страница:

<!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>

CSS:

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;
}

18

css asp.net ajax ajaxcontroltoolkit modalpopupextender

Источник

user164357 28 авг '09 в 15:10

11 ответов

Другие вопросы по тегам css asp.net ajax ajaxcontroltoolkit modalpopupextender

user942568 08 фев '13 в 13:33 2013-02-08 13:33 · Answer 1 · 2013-02-08 13:33

Модальная всплывающая панель имеет абсолютную позицию. Поэтому он должен находиться внутри элемента, который имеет нестатическую позицию. В этом случае я хочу, чтобы он был центрирован на странице, поэтому я поместил его внутри элемента (в данном случае UpdatePanel, но не имеет значения, какой это элемент), который имеет встроенный стиль позиции: исправлено; слева: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>

Я знаю, что оригинальный вопрос довольно старый, но я потратил много времени в поисках ответа на эту проблему, не найдя его, и этот вопрос довольно высоко поднимается в Google, так что, надеюсь, это сэкономит кому-то еще некоторое время.

user484778 04 май '11 в 16:14 2011-05-04 16:14 · Answer 2 · 2011-05-04 16:14

Используйте атрибуты x и y в ModalPopupExtender.

6

Источник

user484778 04 май '11 в 16:14

user1397127 25 сен '12 в 22:53 2012-09-25 22:53 · Answer 3 · 2012-09-25 22:53

Я знаю, что это старый, но пока нет ответа... так что все в порядке?

В любом случае... убедитесь, что панель отделена от главной страницы div/panel. Он использует это как окно для установки позиции.

1

Источник

user1397127 25 сен '12 в 22:53

user1622364 27 ноя '13 в 12:04 2013-11-27 12:04 · Answer 4 · 2013-11-27 12:04

Я знаю, что это очень старый вопрос, но так как я тоже нашел решение, я подумал, что смогу опубликовать, как я наконец решил проблему, чтобы помочь другим.

Просто используйте этот стиль на вашей панели:

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

Предложение "важный" переопределит все остальные настройки из modalpopupextender. Проценты взяты из начальной загрузки Twitter в качестве стандарта. "Отображение" также будет препятствовать отображению вашей панели при загрузке страницы.

user1552386 06 ноя '12 в 10:19 2012-11-06 10:19 · Answer 5 · 2012-11-06 10:19

ModalPopupExtender показывает Panel дано как PopupControlId по центру внутри div вы объявили Panel, Поэтому постарайтесь сохранить ModalPopupExtender где вы это определили, и вылетает Panel из его контейнеров (даже из UpdatePanel). Меня устраивает.

Удачи.

1

Источник

user1552386 06 ноя '12 в 10:19

user9621321 11 фев '19 в 14:24 2019-02-11 14:24 · Answer 6 · 2019-02-11 14:24

Я использовал это, и он отлично работает. Место, которое вы ищете, это X="100" Y="100". Это дает фиксированную позицию, а popupDragHandleControlID дает вам возможность перетаскивать ваше окно, как вы хотите. Здесь решение

<ajaxToolkit:ModalPopupExtender ID="mpePopupTestAdd" runat="server" TargetControlID="hfdPopupAnchorTestAdd" PopupDragHandleControlID="pnlPopupTestAdd"  X="100" Y="100" PopupControlID="pnlPopupFilterAdd" CancelControlID="btnCancelFilterAdd" BackgroundCssClass="ModalPopupBG"></ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopupTestAdd" Style="display: none" runat="server" Width="550" DefaultButton="btnOKTestAdd">
    <div id="divContainerTestAdd" runat="server" class="panel Test">
<!-- header-->
<!-- Body -->
        </div>
</asp:Panel>

user345659 05 сен '11 в 08:17 2011-09-05 08:17 · Answer 7 · 2011-09-05 08:17

Это заняло у меня много времени, чтобы разобраться с моим делом, но в итоге все, что мне нужно было сделать, это изменить высоту панели, которую я увеличивал, со 100% до фиксированной высоты, большей, чем панель.

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

У меня также был мой экстендер вне панели, но сомневаюсь, если это имеет значение. AjaxControlToolkit не любимый!

user1860030 06 фев '13 в 17:01 2013-02-06 17:01 · Answer 8 · 2013-02-06 17:01

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

Это должно расположить ваше всплывающее окно в центре вашей страницы. Затем просто установите CSS для modalbackground, и все будет в порядке.

Том

0

Источник

user1860030 06 фев '13 в 17:01

user960880 25 ноя '11 в 10:58 2011-11-25 10:58 · Answer 9 · 2011-11-25 10:58

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


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

-1

Источник

user960880 25 ноя '11 в 10:58

user2099374 22 фев '13 в 12:16 2013-02-22 12:16 · Answer 10 · 2013-02-22 12:16

Удалите параметр x, y и режим repositio n по умолчанию, он также занимает центральное положение при прокрутке.

-1

Источник

user2099374 22 фев '13 в 12:16

user148466 29 авг '09 в 11:09 2009-08-29 11:09 · Answer 11 · 2009-08-29 11:09

Надеюсь, что это может быть достигнуто двумя способами.

Напишите свойство класса css, как показано ниже, и вызовите имя класса в ModalPopupExtender.

CSS:

.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 на панели.