WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

ModalPopup のドラッグ可能範囲

by WebSurfer 2014年4月5日 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月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年3月  >>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar