WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ModalPopup のドラッグ可能範囲

by WebSurfer 5. April 2014 15:47

Ajax Control Toolkit の ModalPopupExtender をドラッグできない(正確には、ドラッグはできるが元の位置に戻ってしまう)ケースがあります。その理由と対処法を書きます。

ModalPopup のドラッグ可能範囲

検証用に、上の画像のような Button コントロールを一つだけ配置したような aspx ページを作ったとします。

Button クリックで ModalPopup が現れ、デフォルトではウィンドウの中央に表示されるはずです。

これをマウスでクリックして任意の位置にドラッグすることができますが、離すと元の位置に戻ってしまいます。

その理由は、ModalPopup のドラッグが有効なのは body の中だけなので、ボタン一つだけというように body のサイズが極端に小さくなる場合、ドラッグしても元の位置に戻ってしまうということになります。

通常はボタン一つだけというようなページを作ることはないので、このような問題に遭遇することはないかもしれませんが、もし body のサイズが極端に小さくなる場合があれば、CSS で body のサイズを指定してやることで問題を回避できます。

上の画像のサンプルは、実際に動かして試すことができるよう 実験室 にアップしましたが、これは body に height: 300px; width: 600px; というスタイルを適用しています。

height: 300px; width: 600px; の範囲(赤い線で囲った部分)内だけでドラッグして移動できる(範囲外にドラッグした場合は元の位置に戻ってしまう)ことが分かりますので、興味のある方は試してみてください。

サンプルのコードは以下の通りです。

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" 
  Namespace="AjaxControlToolkit" TagPrefix="asp" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>WebSurfer's Page - 実験室</title>
  <style type="text/css">       
    .modalBackground {
      background-color: Gray;
      filter: alpha(opacity=70);
      opacity: 0.7;
    }

    .modalPopup {
      height: 150px;
      width: 400px;
      background-color: White;
    }

    .modalDraggableArea {
      cursor: move; 
      background-color: #DDDDDD; 
      border: solid 1px Gray;
    }

    body {
      height: 300px;
      width: 600px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ToolkitScriptManager ID="Manager1" runat="server">
  </asp:ToolkitScriptManager>
  <asp:ModalPopupExtender ID="ModalPopupExtender1" 
    runat="server"
    TargetControlID="Button1" 
    PopupControlID="Panel1" 
    PopupDragHandleControlID="Panel2"
    BackgroundCssClass="modalBackground"
    OkControlID="Button2"
    CancelControlID="Button3">
  </asp:ModalPopupExtender>

  <asp:Button ID="Button1" 
    runat="server" Text="ModalPopup 表示" />
    
  <asp:Panel ID="Panel1" 
    runat="server" 
    CssClass="modalPopup">
    <asp:Panel ID="Panel2" 
      runat="server" 
      CssClass="modalDraggableArea">
      <p style="text-align: center;">
        ********* ここをつかんでドラッグ *********
      </p>                      
    </asp:Panel>
    <p style="text-align: center;">ModalPopup</p>
    <p style="text-align: center;">
      <asp:Button ID="Button2" runat="server" Text="OK" />
      <asp:Button ID="Button3" runat="server" Text="Cancel" />
    </p>
  </asp:Panel>

  </form>
</body>
</html>

Tags: ,

AJAX

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  June 2021  >>
MoTuWeThFrSaSu
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar