While playing around with that modal popup extender just to see its capabilties, I found a difficulty in positioning the panel (which is the control that pops up as a modal window) in a place other than the center of the page .
I initially tried defining the style atribbute of the panel itself (eg: style="position:absolute; top:200px; left:200px") and didn't work. I then tried applying a css (containg the info about the position in class) to the panel which again didn't work. It
seems that the modal overrides the settings regarding the positioning and always places the panel in the center of its container.
Is there something that I am not doing right?[:S]
ModalPopupAtlas Control Toolkit Modal PopUpASP.NET AJAX Control ToolkitAjaxControlToolkitAJAX Control ToolkitASP.NET AJAX Control Toolkit troubleshootingModalPopupExtender
There are two different classes you need (At minimum) one is to treat how the screen looks when the pop-up is shown. The other is to set the actual "Pop-up" itself. Can you past your CSS styles here so I can see them?
I just spent a whole day working with the modal popup to get it where I wanted.
What I ended up doing on some pages was use JavaScript to get the Position of some elements on a page and position it according to that so data isn't over-writen.
and the second one is the one that is assigned to the BackgroundCssClass attribute of the ModalPopupExtender so as to define the background style when the modal is visible:
I would expect that the panel to be displayed 300px away from the top-left corner, but this does not happen.
What exactly do you mean by saying that I need two different classes at minimum? Aren't these two that I have enough? If not, how would I use any other?
I have also been trying to explicitly set the position of my modalpopup. The modalpopup extender currently does not allow you to do this. So, I went ahead and added a property to allow it to do this.
I added an EnablePositioning property to the extender to specify whether or not the extender will automatically position the popup. If you set this property to false, it does no positioning of the popup allowing you to set the position absolutely in css.
This also fixes the issue where if your popup is too big to fit on the screen, you can use the browser's scroll bars to scroll up and down to see the whole popup. Before, you couldn't do this, because everytime you scrolled, the popup would reposition itself
in the center and you would never be able to see the top or bottom of the popup.
It was a relatively minor change to the existing files. I am using the
61214 release and I changed ModalPopupExtender.cs and ModalPopupBehavior.js:
ModalPopupExtender.cs
Added this (default value to True as to not break existing modalpopups):
[ExtenderControlProperty()]
[DefaultValue(true)]
public bool EnablePositioning
{
get
{
object o = ViewState[stringPositioning];
return (o == null) ? true : (bool)o;
}
set { ViewState[stringPositioning] = value; }
}
For those of you who don't want to change the files yourself, I made the changes and attached them to work item
6785. Everybody go vote for it so it will be in next release... :)
When I click on the drag panel trying to drag the modal popup, it always jumps to other position first (2 inches below from the cursor). I can drag it, but it does not look good.
The main problem here is that with the modal automatically centering, it can go off the top of the page with a large modal. A desired behavior (or option) would be that the modal's "Top" value will not be allowed to be less than 0 (top of the browser frame).
I have run into a situation where I would like the modal to be centered, but some users have small screens or low screen resolutions where the modal "centers" itself and moves part of the modal off the top of the browser window.
I *was* able to prevent the problem by specifying a "Y" value of "20", but that is not the preferred solution as it prevents the modal from ever being centered, even when the screen is large enough.
Please note that the property RepositionMode="None" has been used to stop the ModalPopupExtender from changing the top and left properties of the div.
There is a part of the code (not included here) where this pop up is shown on the click of a button. Please let me know if any one needs the entire code.
None
0 Points
7 Posts
Set the position of a modal popup
Dec 20, 2006 05:37 PM|YiannisF|LINK
While playing around with that modal popup extender just to see its capabilties, I found a difficulty in positioning the panel (which is the control that pops up as a modal window) in a place other than the center of the page .
I initially tried defining the style atribbute of the panel itself (eg: style="position:absolute; top:200px; left:200px") and didn't work. I then tried applying a css (containg the info about the position in class) to the panel which again didn't work. It seems that the modal overrides the settings regarding the positioning and always places the panel in the center of its container.
Is there something that I am not doing right?[:S]
ModalPopup Atlas Control Toolkit Modal PopUp ASP.NET AJAX Control Toolkit AjaxControlToolkit AJAX Control Toolkit ASP.NET AJAX Control Toolkit troubleshooting ModalPopupExtender
Participant
1723 Points
1100 Posts
Re: Set the position of a modal popup
Dec 20, 2006 10:38 PM|RTernier|LINK
There are two different classes you need (At minimum) one is to treat how the screen looks when the pop-up is shown. The other is to set the actual "Pop-up" itself. Can you past your CSS styles here so I can see them?
I just spent a whole day working with the modal popup to get it where I wanted.
What I ended up doing on some pages was use JavaScript to get the Position of some elements on a page and position it according to that so data isn't over-writen.
None
0 Points
7 Posts
Re: Set the position of a modal popup
Dec 21, 2006 05:58 PM|YiannisF|LINK
Well I have two CSS classes in my page.
The first is the one the one that defines the style for the panel that will popup as a modal window:
.modalPopup {
background-color:#ffffdd;
border-width:1px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
position:absolute;
top:300px;
left:300px
}
and the second one is the one that is assigned to the BackgroundCssClass attribute of the ModalPopupExtender so as to define the background style when the modal is visible:
.modalBackground {
background-color:Gray;
opacity:0.6;
}
Bellow are the definitions of the controls involved:
<asp:LinkButton ID="LinkButton1" runat="server">Reveal Modal...</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">
this is the modal<br /><br />
<asp:Button ID="Button1" runat="server" Text="OK" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" CancelControlID="Button1" DropShadow="true" OkControlID="Button2" PopupControlID="Panel1" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
I would expect that the panel to be displayed 300px away from the top-left corner, but this does not happen.
What exactly do you mean by saying that I need two different classes at minimum? Aren't these two that I have enough? If not, how would I use any other?
Thanx!
Member
20 Points
67 Posts
Re: Set the position of a modal popup
Dec 24, 2006 02:15 PM|chadly|LINK
I have also been trying to explicitly set the position of my modalpopup. The modalpopup extender currently does not allow you to do this. So, I went ahead and added a property to allow it to do this.
I added an EnablePositioning property to the extender to specify whether or not the extender will automatically position the popup. If you set this property to false, it does no positioning of the popup allowing you to set the position absolutely in css.
This also fixes the issue where if your popup is too big to fit on the screen, you can use the browser's scroll bars to scroll up and down to see the whole popup. Before, you couldn't do this, because everytime you scrolled, the popup would reposition itself in the center and you would never be able to see the top or bottom of the popup.
It was a relatively minor change to the existing files. I am using the 61214 release and I changed ModalPopupExtender.cs and ModalPopupBehavior.js:
ModalPopupExtender.cs
Added this (default value to True as to not break existing modalpopups):
[ExtenderControlProperty()]
[DefaultValue(true)]
public bool EnablePositioning
{
get
{
object o = ViewState[stringPositioning];
return (o == null) ? true : (bool)o;
}
set { ViewState[stringPositioning] = value; }
}
In ModalPopupBehavior.js:
Change these lines in function definition:
this._DropShadow = false;
this._OkControlID = null;
to this (just add _EnablePositioning property):
this._DropShadow = false;
this._EnablePositioning = true;
this._OkControlID = null;
Change these lines in initialize function:
this._foregroundElement.style.display = 'none';
this._foregroundElement.style.position = 'absolute';
this._foregroundElement.style.zIndex = CommonToolkitScripts.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
to this:
this._foregroundElement.style.display = 'none';
this._foregroundElement.style.zIndex = CommonToolkitScripts.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
if (this._EnablePositioning) {
this._foregroundElement.style.position = 'absolute';
}
Change these lines in _layout function:
this._foregroundElement.style.left = scrollLeft+((clientWidth-this._foregroundElement.offsetWidth)/2)+'px';
this._foregroundElement.style.top = scrollTop+((clientHeight-this._foregroundElement.offsetHeight)/2)+'px';
to this:
if (this._EnablePositioning) {
this._foregroundElement.style.left = scrollLeft+((clientWidth-this._foregroundElement.offsetWidth)/2)+'px';
this._foregroundElement.style.top = scrollTop+((clientHeight-this._foregroundElement.offsetHeight)/2)+'px';
}
And finally, add the property accessors:
get_EnablePositioning : function() {
return this._EnablePositioning;
},
set_EnablePositioning : function(value) {
if (this._EnablePositioning != value) {
this._EnablePositioning = value;
this.raisePropertyChanged('EnablePositioning');
}
},
For those of you who don't want to change the files yourself, I made the changes and attached them to work item 6785. Everybody go vote for it so it will be in next release... :)
None
0 Points
4 Posts
Re: Set the position of a modal popup
Dec 25, 2006 01:31 AM|gwallan|LINK
Participant
1348 Points
644 Posts
Re: Set the position of a modal popup
Dec 29, 2006 02:17 AM|kirtid|LINK
We have added drag and drop support to the modal popup and that should be in the next toolkit released. We will look into your suggestion as well.
Thanks,
Kirti
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
None
0 Points
2 Posts
Re: Set the position of a modal popup
Jun 04, 2007 12:17 PM|cxu|LINK
When I click on the drag panel trying to drag the modal popup, it always jumps to other position first (2 inches below from the cursor). I can drag it, but it does not look good.
None
0 Points
16 Posts
Re: Set the position of a modal popup
Mar 12, 2009 03:25 AM|nripinbabu@msn.com|LINK
To give static Location you can use X="200" Y="200" properties for the ModalPopupExtender control :)
None
0 Points
16 Posts
Re: Set the position of a modal popup
Mar 12, 2009 03:26 AM|nripinbabu@msn.com|LINK
To give static Location you can use X="200" Y="200" properties for the ModalPopupExtender control :)
<AjaxToolkit:ModalPopupExtender ID="mpeTypes" runat="server" TargetControlID="btnHidden"
PopupControlID="pnlSegTypes" X="200" Y="200" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</AjaxToolkit:ModalPopupExtender>
None
0 Points
1 Post
Re: Set the position of a modal popup
Jun 10, 2010 01:32 PM|navincumar|LINK
i have done it by adding javascript to page onload function like this
function pageLoad() {
var modpop = $find("RegisterPoPUp");
if (!modpop)
{ return; }
else {
x = document.getElementById("p");
x.style.position = "absolute";
}
};
where "RegisterPopup" is behaviourID of my modalpopup and "p" is clientID of my popup panel
Naveen Kumar
None
0 Points
5 Posts
Re: Set the position of a modal popup
Oct 01, 2010 06:58 PM|TenshiNo|LINK
The main problem here is that with the modal automatically centering, it can go off the top of the page with a large modal. A desired behavior (or option) would be that the modal's "Top" value will not be allowed to be less than 0 (top of the browser frame).
I have run into a situation where I would like the modal to be centered, but some users have small screens or low screen resolutions where the modal "centers" itself and moves part of the modal off the top of the browser window.
I *was* able to prevent the problem by specifying a "Y" value of "20", but that is not the preferred solution as it prevents the modal from ever being centered, even when the screen is large enough.
Member
7 Points
138 Posts
Re: Set the position of a modal popup
Apr 21, 2011 02:37 PM|ravikirantummala2000|LINK
I have followed the steps were written by Mr.Chadly. It is not at all working to set modalpopup position. Can anybody suggest on this?
None
0 Points
1 Post
Re: Set the position of a modal popup
Mar 21, 2018 06:53 PM|skaushik85|LINK
Hi
I am not sure whether this issue got resolved for you or not as it is an old post. But, I encountered the same issue today and fixed it.
My ascx code is as shown below:
<ajaxToolkit:ModalPopupExtender ID="_mpeReview" runat="server" CancelControlID="btnCancel" OkControlID="_btnCloseReview" TargetControlID="_btnReview" PopupControlID="_pnlReview" PopupDragHandleControlID="ReviewPopupHeader" Drag="true" BackgroundCssClass="ReviewPopupBG" RepositionMode="None" />
<asp:Panel ID="_pnlReview" runat="server" CssClass="ReviewPopupContainer" Style="z-index: 10001; display: none;">
<div class="ReviewPopup">
.....//code for whatever is to be shown in the pop up.
</div>
</asp:Panel>
And the css for the same is as follows:
.ReviewPopupContainer {top: 0px !important;left: 0px !important;position: fixed !important;}
.ReviewPopup {top: 25% !important;left: 35% !important;position: fixed;width: 541px;min-height: 300px;background-color: #D3DEEF;border: 1px solid #2F4F4F;border-top: none;padding: 5px;}
Please note that the property RepositionMode="None" has been used to stop the ModalPopupExtender from changing the top and left properties of the div.
There is a part of the code (not included here) where this pop up is shown on the click of a button. Please let me know if any one needs the entire code.
Regards
Sud