locked
Set the position of a modal popup RRS feed

  • Question

  • User-546739143 posted

    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="; 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]


     

    Wednesday, December 20, 2006 5:37 PM

All replies

  • User1001789087 posted

    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.

    Wednesday, December 20, 2006 10:38 PM
  • User-546739143 posted

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

     

    Thursday, December 21, 2006 5:58 PM
  • User-1261216960 posted

    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...  :)

    Sunday, December 24, 2006 2:15 PM
  • User826723467 posted
    thanks chadly
    Monday, December 25, 2006 1:31 AM
  • User1521926456 posted

    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

    Friday, December 29, 2006 2:17 AM
  • User-500395420 posted

    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.

    Monday, June 4, 2007 12:17 PM
  • User-276214393 posted

    To give static Location you can use X="200" Y="200" properties for the ModalPopupExtender control :)

    Thursday, March 12, 2009 3:25 AM
  • User-276214393 posted

    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>

    <ajaxtoolkit:modalpopupextender id="mpeTypes" runat="server" targetcontrolid="btnHidden" popupcontrolid="pnlSegTypes" x="200" y="200" cancelcontrolid="btnCancel" backgroundcssclass="modalBackground"> </ajaxtoolkit:modalpopupextender>
    Thursday, March 12, 2009 3:26 AM
  • User-1193859173 posted

    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

    Thursday, June 10, 2010 1:32 PM
  • User1372589710 posted

    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.

    Friday, October 1, 2010 6:58 PM
  • User1499943555 posted

    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?

    Thursday, April 21, 2011 2:37 PM
  • User1098238572 posted

    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; !important;}

    .ReviewPopup {top: 25% !important;left: 35% !important;;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

    Wednesday, March 21, 2018 6:53 PM