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

雨点打透心脏的1/2处 2022-01-05 08:37 232阅读 0赞

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

![o_E8_A3_81_E5_89_AA_3.jpg][]

<table style="border-right:medium none;border-top:medium none;border-left:medium none;border-bottom:medium none;border-collapse:collapse;"> 
 <tbody> 
 <tr> 
 <td style="border-right:1pt solid;border-top:1pt solid;border-left:1pt solid;width:140.4pt;border-bottom:1pt solid;"> 属性 </td> 
 <td style="border-right:1pt solid;border-top:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-bottom:1pt solid;"> 解释 </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> TargetControlID </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> 点击后出现对话框的控件，一般为按钮控件 </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> PopupControlID </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> 对话框中的Panel的id </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> BackgroundCssClass </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> 背景的css </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> DropShadow </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> 对话框是否有阴影效果 </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> OkControlID </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> Ok按钮的id </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> OnOkScript </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> Ok按钮触发脚本 </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> CancelControlID </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> Cancel按钮的id </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> OkCancelScript </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> Cancel按钮触发脚本 </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> PopupDragHandleControlID </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> Panel的中的标题栏，可以拖动，一般也是Panel </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> X </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> 出现时，顶部的位置。 </td> 
 </tr> 
 <tr> 
 <td style="border-right:1pt solid;border-left:1pt solid;width:140.4pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> Y </td> 
 <td style="border-right:1pt solid;border-left-color:#ece9d8;width:285.7pt;border-top-color:#ece9d8;border-bottom:1pt solid;"> 出现时，左边的位置。 </td> 
 </tr> 
 </tbody> 
</table>

例子：

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

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="demoheading">ModalPopup Demonstration</div>

<%= GetContentFillerText() %>

<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>

Choose the paragraph style you would like:

</div>

</asp:Panel>

<div>

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

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

</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][http_asp.net_AJAX_Control-Toolkit_Live_ModalPopup_ModalPopup.aspx]

转载于:https://www.cnblogs.com/hainange/archive/2007/09/21/6153333.html

[o_E8_A3_81_E5_89_AA_3.jpg]: /images/20211229/8ae72b3295c24a928e88f248345e89f6.png
[http_asp.net_AJAX_Control-Toolkit_Live_ModalPopup_ModalPopup.aspx]: http://asp.net/AJAX/Control-Toolkit/Live/ModalPopup/ModalPopup.aspx