altas(ajax)控件(十六)：遮盖全屏幕的对话框控件ModalPopup

altas(ajax)控件(十六)：遮盖全屏幕的对话框控件ModalPopup

遮盖全屏幕的对话框扩展控件ModalPopup使用时，会出现整个屏幕都会是灰色的，只有一个“模式”对话框可以操作. ModalPopup是一个扩展控件，它建立在已经存在panel等容器控件的基础上，而panel上可以放置任何控件，panel的样式也是自定义的. 当控件使用时, 点击panel之外的操作都是无效的. ModalPopup扩展控件，可以在Panel中指定一个“OK”按钮和“Cancel”按钮，并且可以执行这两个按钮的客户端代码. 同时扩展控件有一个”X”和“Y”可以指定panel出现时候的顶部和左边的位置.

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 306.75pt; HEIGHT: 214.5pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image001.png"></imagedata></shape>

属性	解释
TargetControlID	点击后出现对话框的控件，一般为按钮控件
PopupControlID	对话框中的Panel的id
BackgroundCssClass	背景的css
DropShadow	对话框是否有阴影效果
OkControlID	Ok按钮的id
OnOkScript	Ok按钮触发脚本
CancelControlID	Cancel按钮的id
OkCancelScript	Cancel按钮触发脚本
PopupDragHandleControlID	Panel的中的标题栏，可以拖动，一般也是Panel
X	出现时，顶部的位置。
Y	出现时，左边的位置。

例子：

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />

<script type="text/javascript">

var styleToSelect;

function onOk() {

//在这里写代码

}

// Add click handlers for buttons to show and hide modal popup on pageLoad

function pageLoad() {

$addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);

$addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);

}

function showModalPopupViaClient(ev) {

ev.preventDefault();

var modalPopupBehavior = $find('programmaticModalPopupBehavior');

modalPopupBehavior.show();

}

function hideModalPopupViaClient(ev) {

ev.preventDefault();

var modalPopupBehavior = $find('programmaticModalPopupBehavior');

modalPopupBehavior.hide();

}

</script>

<div class="demoarea">

<div class="demoheading">ModalPopup Demonstration</div>

<p id="Paragraph1"><%= GetContentFillerText() %></p><br />

<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />

<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">

<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">

<div>

<p>Choose the paragraph style you would like:</p>

</div>

</asp:Panel>

<div>

<p style="text-align: center;">

<asp:Button ID="OkButton" runat="server" Text="OK" />

<asp:Button ID="CancelButton" runat="server" Text="Cancel" />

</p>

</div>

</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"

TargetControlID="LinkButton1"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

OkControlID="OkButton"

OnOkScript="onOk()"

CancelControlID="CancelButton"

DropShadow="true"

PopupDragHandleControlID="Panel3" />

<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>

<ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"

BehaviorID="programmaticModalPopupBehavior"

TargetControlID="hiddenTargetControlForModalPopup"

PopupControlID="programmaticPopup"

BackgroundCssClass="modalBackground"

DropShadow="True"

PopupDragHandleControlID="programmaticPopupDragHandle" >

</ajaxToolkit:ModalPopupExtender>

http://asp.net/AJAX/Control-Toolkit/Live/ModalPopup/ModalPopup.aspx