ModalPopupExtender彈出時置於畫面中央
基本上要將ModalPopupExtender置於畫面中央，在ModalPopupExtender的X及Y均不要設定，程式前端加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">後，便可自動置中。
但如果其他因素而無法加入以上的DOCTYPE宣告，則自己計算並定位囉。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html>
<head runat="server">
<script type="text/javascript">
function pageLoad() {
$addHandler($get("btnShowPopup"), 'click', showModalPopupViaClient);
}
function showModalPopupViaClient(ev) {
var wLeft = (screen.width - screen.width*0.8) / 2; //此例Panel寬80%
var win_h = document.body.clientHeight;
var win_scrolltop = document.body.scrollTop;
var wTop = (win_h - 250) / 2 + win_scrolltop; //此例Panel高250px
$find("ModalPopupExtender1").set_X(wLeft);
$find("ModalPopupExtender1").set_Y(wTop);
ev.preventDefault();
var modalPopupBehavior = $find('ModalPopupExtender1');
modalPopupBehavior.show();
}
</script>
<style type="text/css">
/* 強制回應彈出式方塊的可拖曳處 */
.cssDragHandler
{
background-color: #90b403;
color: #363636;
text-align: center;
border: 5px double #fff;
cursor: move;
font-weight: bolder;
font-size: 15pt;
}
/* 於顯示「強制回應彈出式方塊」時，背景項目所用的樣式 */
.modalBackground
{
background-color: #808080;
filter: alpha(opacity=60);
opacity: 0.60;
}
/* 強制回應彈出式對話方塊所用的樣式 */
.cssModalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
color: #AFA500;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true" />
<asp:Button ID="btnShowPopup" runat="server" Text="TEST BUTTON" />
<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" TargetControlID="btnShowPopup" PopupControlID="panEdit" CancelControlID="" PopupDragHandleControlID="panDrag" X="50" Y="50"></ajaxToolkit:ModalPopupExtender>
<%-- 強制回應彈出式方塊（ModalPopup）的容器 --%>
<asp:Panel ID="panEdit" runat="server" CssClass="cssModalPopup" Style="display: none; overflow:scroll; height:250px; width:80%;">
<%-- 強制回應彈出式方塊可拖曳的地方 --%>
<asp:Panel ID="panDrag" runat="server" CssClass="cssDragHandler">
<h1>ModalPopup彈出顯示測試</h1><br>
<asp:Button ID="btnClose" runat="server" Text="關閉" OnClientClick= "$find('ModalPopupExtender1').hide(); return false;" />
</asp:Panel>
</asp:Panel>
</form>
</body>
</html>
留言列表
