AJAX ControlToolkit學習日誌-ModalPopupExtender(16)

來源:互聯網
上載者:User
      ModalPopupExtender控制項用於設定網頁上文本的樣式。

下面看一個樣本:

1)在Vs2005中建立一個ASP.NET AJAX-Enabeld Web Project項目工程,命名為ModalPopupExtender1。

2)在Default.aspx中的<div/>標籤中添加一段文字。再添加一個LinkButton控制項,用於觸發控制樣式面板產生。

3)然後再頁面上添加一個Panel,命名為Panel1,作為彈出面板。在Panel1中添加一個Panel,命名為Panel2,作為控制拖動的控制項。最後在Panel1中添加4個Radio控制項,用於提供不同的樣式。

代碼如下:

 1<asp:Panel ID="Panel1" runat="server" BorderColor="DeepSkyBlue" BorderWidth="1px"
 2            Height="278px" HorizontalAlign="Center" Width="420px" style="display:none;" CssClass="modalPopup">
 3            <asp:Panel ID="Panel2" runat="server" BorderColor="Orange" BorderWidth="1px" Height="25px"
 4                HorizontalAlign="Center" style="margin:top 4px;cursor:move;" Width="409px" >
 5                Choose the paragraph style you would like:</asp:Panel>
 6            <br />
 7            <div style="width:420px;text-align:left">
 8            <p class="sampleSytleA"><input id="Radio1" name="styleSelect" checked="checked" type="radio" onclick="styleToSelect='sampleStyleA'" />Sample paragraph text</p>
 9            <p class="sampleStyleB"><input id="Radio2" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleB'" />Sample paragraph text</p>
10            <p class="sampleStyleC"><input id="Radio3" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleC'" />Sample paragraph text</p>
11            <p class="sampleStyleD"><input id="Radio4" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleD'" />Sample paragraph text</p>
12            </div>
13            <div style="text-align:center">
14                <asp:Button ID="OkButton" runat="server" Text="OK" />
15                <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
16            </div>
17        </asp:Panel>

4)在頁面上添加一個ModalPopupExtender,並設定一些屬性。

代碼如下:1        <cc1:modalpopupextender id="ModalPopupExtender1" TargetControlID="LinkButton1"
2         OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton"  PopupDragHandleControlID="Panel2" DropShadow="true" PopupControlID="Panel1" BackgroundCssClass="modalBackground"  runat="server"></cc1:modalpopupextender>
3

屬性說明:

      TargetControlID:用於觸發彈出面板的控制項。
      OkControlID:彈出面板中的確認按鈕,用於確認新的樣式。
       OnOkScript:當單擊確認按鈕後,關閉樣式面板後,執行指令碼。
      CancelControlID:樣式面板中的取消按鈕,用於取消應用樣式。
      PopupDragHandleControlID:樣式面板中用於觸發面板的控制項。
      DropShadow:樣式面板是否有陰影。值為True,則有陰影;值為False,則沒有陰影。
      BackgroundCssClass:樣式面板中應用的css樣式。

5)在頁面中添加指令碼,用於處理彈出面板中樣式選擇。

代碼如下:

1        var styleToSelect;
2        function onOk()
3        {
4            $get("text").className=styleToSelect;
5        }

6)按下CTRL+F5,在瀏覽器中查看效果。

如下:

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.