화면 문제의 중앙에 AJAX ModalPopup Extender 위치 지정
팝업드래그핸들 컨트롤일 때 ModalPopupExtender를 화면 중앙에 배치하는 데 문제가 있습니다.ID 속성이 설정되어 있습니다(이 속성이 없으면 잘 작동함).
ModalPopupExtender가 화면 중앙에 위치하지 않습니다.문제의 원인은 페이지의 CSS 레이아웃 때문이라고 생각합니다. 비활성화할 때 화면 중앙에 팝업이 위치합니다(페이지의 CSS가 팝업 드래그핸들 컨트롤일 때만 ModalPopupExtender에 영향을 주는 이유를 이해할 수 없습니다.ID 속성이 설정됨)
페이지:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="container">
<div id="center" class="column">
<div id="centercolcontent" class="centercolcontent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Text="Open" />
<asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" style="display: none;">
<cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlUploader" CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="pnlUploader" RepositionMode="RepositionOnWindowResize" />
<div id="pnlDragMe" class="pnlDragMe">
Image Uploader
</div>
<div class="upload" id="upload">
<div id="status" class="info">
Please select a file to upload
</div>
<div class="commands">
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClientClick="javascript:onUploadClick()" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<div id="left" class="column">
</div>
<div id="right" class="column">
</div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>
CSS:
body
{
min-width: 630px;
}
#container
{
padding-left: 200px;
padding-right: 150px;
}
#container .column
{
position: relative;
float: left;
}
#center
{
padding: 0px 0px;
width: 100%;
}
#left
{
width: 200px;
padding: 0 0px 0 0;
right: 200px;
margin-left: -100%;
}
#right
{
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer
{
clear: both;
}
* html #left
{
left: 150px; /* RC fullwidth */
}
/*** Equal-height Columns ***/
#container
{
overflow: hidden;
}
#container .column
{
padding-bottom: 1001em; /* X + padding-bottom */
margin-bottom: -1000em; /* X */
}
* html body
{
overflow: hidden;
}
* html #footer-wrapper
{
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #FFF; /*** Same as body background ***/
}
body
{
margin: 0;
padding: 0;
}
#header, #footer
{
font-size: large;
text-align: center;
padding: 0.3em 0;
}
#left
{
/*background: #66F;*/
}
#center
{
background: #DDD;
}
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
Modal 팝업 패널에는 절대 위치가 제공됩니다.따라서 고정적이지 않은 위치를 가진 요소 내부에 있어야 합니다.이 경우에는 페이지 중앙에 배치하고 싶어서 인라인 스타일의 위치:고정, left:0;top:0인 요소(UpdatePanel의 경우에는 어떠한 요소라도 상관 없음) 안에 넣었습니다.
<asp:UpdatePanel ID="updProductPopup" runat="server" style="position:fixed;left:0;top:0;">
<contenttemplate>
<act:ModalPopupExtender ID="mpeProduct" runat="server" BackgroundCssClass="modalPopupBackground" BehaviorID="behaviourModalPopup" OkControlID="btnMpClose" PopupControlID="pnlModalPopup" PopupDragHandleControlID="pnlMpHandle" TargetControlID="btnMpHidden">
</act:ModalPopupExtender>
<!-- pnlModalPopup MUST have inline style display:none -->
<asp:Panel ID="pnlModalPopup" runat="server" CssClass="modalPopup" style="display:none;">
<asp:Panel runat="server" ID="pnlMpHandle" CssClass="modalPopupDragHandle">
Panel Header
</asp:Panel>
<asp:Panel runat="server" ID="pnlMpContent">Here's my content</asp:Panel>
<p class="modalPopupClose">
<a id="btnMpClose" href="#" class="custom-button">Close</a>
</p>
</asp:Panel>
<asp:Button ID="btnMpHidden" runat="server" Text="Button" CssClass="modalPopupHiddenButton" />
</contenttemplate>
원래 질문이 꽤 오래된 것은 알지만, 저는 이 문제에 대한 답을 찾기 위해 많은 시간을 보냈습니다. 그리고 이 질문은 구글에서 꽤 높게 뜨기 때문에 이것이 다른 사람을 구할 수 있기를 바랍니다.
ModalPopup Extender의 x 및 y 특성을 사용합니다.
오래된 건 알지만 아직 답이 없어요 괜찮으세요?
어쨌든... 패널이 메인 페이지 div/panel에서 분리되어 있는지 확인합니다.위치를 설정하는 창으로 사용하는 겁니다.
저는 이것이 아주 오래된 질문이라는 것을 알고 있지만, 해결책을 찾기 위해 여기에 온 것이기 때문에, 제가 어떻게 그 문제를 해결했는지, 다른 사람들을 돕기 위해 게시할 수도 있다고 생각했습니다.
패널에서 이 스타일만 사용하면 됩니다.
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />
"중요" 절은 modal 팝업 확장자의 다른 모든 설정을 재정의합니다.백분율은 트위터 부트스트랩에서 표준으로 가져온 것입니다."표시" 기능을 사용하면 페이지를 로드하는 동안 패널이 표시되지 않습니다.
이것은 제 사례를 해결하는 데 많은 시간이 걸렸지만, 결국 제가 해야 할 일은 패널의 높이를 100%에서 패널보다 더 큰 고정 높이로 변경하는 것이었습니다.
<asp:Panel ID="pnlUploader" Width="500px"...
패널 바깥쪽에도 익스텐더가 있었는데 그게 중요한지는 의문입니다.Ajax Control Toolkit은 즐겨찾기가 아닙니다!
ModalPopupExtender을 보여줍니다.Panel로 보아PopupControlId당신이 선언한 디브 안에 중심을 두고 있습니다.Panel. 그러니까 계속 해봐요.ModalPopupExtender정의한 위치와 팝업 이동Panel그것의 용기로부터(심지어 그 밖에서).UpdatePanel가 있습니다. 저한테 효과가 있습니다.
행운을 빌어요.
#ModalPopUp
{
Position:relative;
Height:400px;
Width:400px;
Margin-left:auto;
Margin-right:auto;
}
그러면 팝업이 페이지 중앙에 배치됩니다.그럼 모달 배경에 대한 CSS만 설정해주시면 됩니다.
톰.
이거 썼는데 잘 되네요.찾으시는 곳은 X="100" Y="100"입니다.고정된 위치와 팝업DragHandleControl을 제공합니다.ID를 사용하면 원하는 대로 창을 끌 수 있습니다.여기 해결책이 있습니다.
<ajaxToolkit:ModalPopupExtender ID="mpePopupTestAdd" runat="server" TargetControlID="hfdPopupAnchorTestAdd" PopupDragHandleControlID="pnlPopupTestAdd" X="100" Y="100" PopupControlID="pnlPopupFilterAdd" CancelControlID="btnCancelFilterAdd" BackgroundCssClass="ModalPopupBG"></ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopupTestAdd" Style="display: none" runat="server" Width="550" DefaultButton="btnOKTestAdd">
<div id="divContainerTestAdd" runat="server" class="panel Test">
<!-- header-->
<!-- Body -->
</div>
</asp:Panel>
이것이 두 가지 방법으로 달성될 수 있기를 바랍니다.
- 아래와 같이 css 클래스 속성을 작성하고 ModalPopupExtender에 클래스 이름을 불러주세요.
CSS:
.hcenter{margin:0 auto; width:200;} /* I have given a sample width you give the width of your popup */
코드 :
<asp:Panel ID="pnlUploader" runat="server" CssClass="hcenter" style="display: none;">
<cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlUploader" CancelControlID="btnCancel"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="pnlUploader"
RepositionMode="RepositionOnWindowResize" />
...
- 패널에서 HorizontalOffset 속성을 시도합니다.
.panel
{
position: absolute;
top: 50%;
left:50%;
}
<asp:Panel id ="pnlUploader" CssClass="panel">
매개 변수 x, y를 제거하고 기본적으로 스크롤할 때도 중심 위치를 잡습니다.
언급URL : https://stackoverflow.com/questions/1347632/positioning-ajax-modalpopupextender-in-the-center-of-the-screen-problem
'programing' 카테고리의 다른 글
| 이미 가져온 모듈 편집 (0) | 2023.10.20 |
|---|---|
| jQuery/JavaScript 충돌 탐지 (0) | 2023.10.20 |
| WooCommerce 배송비 포함 세금 (0) | 2023.10.20 |
| 프로그래밍 방식으로 워드프레스에 하위 게시물 삽입 (0) | 2023.10.20 |
| 여러 블로그 설치 간에 Wordpress Core Files를 그대로 공유하기 (0) | 2023.10.20 |