DropShadowExtender и RoundedCornersExtender не очень хорошо играют с ModalPopupExtender - PullRequest
Новая
       6

DropShadowExtender и RoundedCornersExtender не очень хорошо играют с ModalPopupExtender

0 голосов
/ 22 июля 2011

У меня есть следующая панель 

<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
   <div style="position:absolute; top:0; right: 0;">
      <asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
   </div>
   <div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
     <asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
     <asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
     <span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
   </div>
   <div style="padding-left: 20px; padding-top: 15px;">           
          <div style="float: left; padding-right: 10px;">
             <asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
          </div>
          <div style="float: left; padding-right: 10px;">
             <asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
          </div>          
          <div style="float: left; padding-right: 10px;">
            <asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
          </div>
          <div style="float: left; padding-right: 10px;">
            <asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
          </div>       
          <div style="float: left; padding-right: 10px;">
            <asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
          </div>
          <div style="float: left;">
            <asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png"  OnClick="btnMessage_click"/>
          </div>           
   </div>       
 </asp:Panel>

Поскольку эта информация будет привязана к стороне сервера, в зависимости от того, какой элемент управления выбран в списке данных, у меня есть: 

 <cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController" 
                 CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>

I тогдавызовите mpeActiveSession.Show () в коде после того, как я свяжу данные.

ОК, в элементе управления указана тень, но именно здесь начинается история.Я заканчиваю этого парня, и он работает прекрасно, и проклятый клиент жалуется, что всплывающие окна не выглядят достаточно учтивыми.На самом деле они имели в виду, что всплывающие окна выглядят не так, как Mac Windows.В любом случае, они просили закругленные углы, чтобы тень не была непрозрачной и закругленной.Итак, я говорю хорошо, надеюсь, я могу просто добавить следующее. 

 <cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
 <cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>

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

1 Ответ

0 голосов
/ 26 июля 2011

Хорошо, CSS3 устарели RoundedCornersExtender и DropShadowExtender. Все, что вам нужно, это радиус границы и тень блока.

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

...