locked
Help: Modal Popup positioning with IE7 RRS feed

  • Question

  • User-411554792 posted

    Hi,

    I've been trying to position the ModalPopup in IE7 the whole day now and can't get it to work ...

    I placed the panel in my design.master page (used by a whole load of pages), right after the "<form>"-tag and the ScriptManager.
    (<asp:Panel ID="PaCancel" runat="server">)
    Inside I have a table and two buttons.


    As I have several buttons and links on the page that should trigger the ModalPopup, I go through the page recursively, collecting all controls with a special name, after that I create the extenders for the links:
            foreach (Control ctrl in myMPE)
            {
                AjaxControlToolkit.ModalPopupExtender mpe = new AjaxControlToolkit.ModalPopupExtender();
                mpe.ID = "MPE_" + ctrl.ID;
                mpe.TargetControlID = ctrl.ID;
                mpe.PopupControlID = "PaCancel";
                mpe.DropShadow = true;
                mpe.BackgroundCssClass = "modalback";
                mpe.CancelControlID = "IbReturn";

                serverform.Controls.Add(mpe);
            }

    Works great in Firefox and Netscape. In Opera, the Panel will be at the top of the page, centered horizontally.
    But now IE7: the Panel is centered around the coordinates 0/0, so all I see is the lower right quarter of the Panel, there is NO way (with CSS, style, etc.) to reposition it, as soon as I remove the extenders, the Panel is just where I want it to  be.

    I've tried everything imaginable but can't get the Panel (which is the ModalPopup) to appear in the center of the page, blurring the background with grey/70%-opacity, just as it does in Firefox and Netscape ...

    Hope anybody can help me out, I'm tired and completely lost :(

    Greetings, B.
     

    Monday, December 4, 2006 11:41 AM

Answers

All replies

  • User-411554792 posted

    Hi again,

    I've been through some more testing today and still can't fix it.

    I've created a whole new site with a ModalPopup and it works just fine in IE (6&7), no masterpage or placeholders used.
    On the site we're trying to get it to work, we're working with a master page and a ContentPlaceholder to fill in several pages, and here: no way.

    I tried and removed all information from the CSS-file that the pages are using: the same result.

    I moved the ModalPopup-Panel around in the code of the masterpage. It moved a bit in IE as well as a result, but still it stayed on top of the page, only half visble. In Firefox, the moving around of the Panel in the code made the blurry background start at the point where the panel started (e.g. inside a div-tag), not covering the whole page any more, which I found surprising as I thought the ModalPopup would ALWAYS cover the whole website, no matter where I placed it in the code.
    (I checked the example site (http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx) and found the ModalPopup-panel in the middle of the sourcecode, but here it still covers all of the page when the ModalPopup is triggered.)

    I tried to remove as much code from the masterpage as possible: the same result, the problem seems to be somewhere in the content of the content placeholder (but where ??).

    I set each div on every page to width=100% and height=100%, to see if there was an enclosing div around the ModalPopup-panel which was too small to get it displayed. You guessed it: the same result.


    I guess that's it for me now, I can't think of anything more to try out ...

    Greetings, B.

    Tuesday, December 5, 2006 10:33 AM
  • User-1429816726 posted

    There's a work item that sounds like a similar problem, but I need to see this in order to fix it. Could you please reply with a complete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

    Friday, December 8, 2006 4:25 PM
  • User-411554792 posted

    Hi David,

    thanks for your reply and sorry for my delayed answer - we had to release the project and now built a workaround, showing a popup in IE, which is of course not what our customer wants so we're still trying to solve this issue.
    Unfortunately we're using the ModelPopup in a major project, extracting the necessary code showing the problem and making it work in a sample page would be an effort of days.

    I'll try to post as much code as I can to make the problem clear.

     

    part of design.master with the ModalPopup-DIV:

    <body>
        <form id="serverform" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
            <asp:Panel ID="PaCancel" runat="server" Style="display: none; border: 3px solid #B40A0B;">
              (...)
                            <asp:ImageButton ID="IbReturn" runat="server" AlternateText="back to order process"
                                    ImageUrl="pix/popup/but_zurueck.jpg" Width="188" Height="37" />
                                    &nbsp;
                            <asp:ImageButton ID="IbCancel" runat="server" AlternateText="leave order process"
                                    ImageUrl="pix/popup/but_verlassen.jpg" Width="188" Height="37" OnClick="IbCancel_Click" />
              (...)
            </asp:Panel>
              (...)
             <a href="Newsletter.aspx" class="marginal" runat="server" id="CancelLink2_newsletter">Newsletter</a>  (this is one of the "Cancel"-Links, there's a dozen in each page)
              (... more divs, navigation, etc. here ...)
                                <div id="main_content">
                                    <asp:ContentPlaceHolder ID="HauptInhalt" runat="server">
                                    </asp:ContentPlaceHolder>
                                </div>
            (... more divs here, bottom-navigation, etc. ...)
    </body>


    CSS for main_content:
    #main_content
    {
        ;
        left: 0px;
        left: 0px;
        top: 0px;
        z-index: 5;
        width: 100%;
    }
     

    part of design.master.cs

     get all "Cancel"-Links:
        private ArrayList myMPE = new ArrayList();
    (...)
                RecurseControls(serverform, "CancelLink");

    with this:
        private void RecurseControls(Control root, string name)
        {
            foreach (Control c in root.Controls)
            {
                if (c.ID != null)
                {
                    if (c.ID.Contains(name))
                    {
                        myMPE.Add(c);
                    }
                    RecurseControls(c, name);
                }
            }
        }

     
    then create the extenders, one for each link:

                    foreach (Control ctrl in myMPE)
                    {
                        AjaxControlToolkit.ModalPopupExtender mpe = new AjaxControlToolkit.ModalPopupExtender();
                        mpe.ID = "MPE_" + ctrl.ID;
                        mpe.TargetControlID = ctrl.ID;
                        mpe.PopupControlID = "PaCancel";
                        mpe.DropShadow = true;
                        mpe.BackgroundCssClass = "modalback";
                        mpe.CancelControlID = "IbReturn";
                        serverform.Controls.Add(mpe);
                    }


    now, one of the pages that we want to use the ModalPopup in:

    (...)
    <%@ Page Language="C#" MasterPageFile="~/design.master" AutoEventWireup="true" CodeFile="page.aspx.cs" Inherits="page" Title="test" %>
    <asp:Content ID="Inhalt" ContentPlaceHolderID="HauptInhalt" runat="Server">
    (...)
    </asp:Content>

     

    Thanks for your time.

    Greetings, B.

    Wednesday, January 17, 2007 5:58 AM
  • User-669679874 posted

    I got the same issue, to fix it I replaced <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     by <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

    hope this help.

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 25, 2007 12:08 PM
  • User-411554792 posted
    Thanks for your reply, but what exactly is the difference between the two lines ?
    Monday, January 29, 2007 4:02 AM
  • User-669679874 posted

    Hi,
    there is no difference, oops copy past error... so the difference was supposed to be :

    replace <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> by <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

    It works for me.

     

    Monday, January 29, 2007 12:37 PM
  • User-411554792 posted

    Thank you very much, using the XHTML-Doctype fixes the issue, I never thought that could make any difference ... made my day, thanks again !

    Monday, February 5, 2007 4:46 AM
  • User-636165704 posted

    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> by <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

    It works for me.

    Thanks!! I really struggled getting the position of the popup right for days now!!

    Tuesday, June 12, 2007 8:14 AM
  • User-597672045 posted

    Thanks!! I really struggled getting the position of the popup right for days now!!

    There is one more case that will make this happen.  I just spent 8 hours because of this.  A commented out Register tag will do the same thing like this.

    <!--<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>-->
    Saturday, October 13, 2007 5:24 PM
  • User1992229109 posted

    We experienced the same problem using the ModalPopup control in SharePoint 2007. Adding the doctype definition to the masterpage solved the problem. However, some default SharePoint parts are no longer being displayed correctly. Trying to find a fix for that now. Tested the ModalPopup with this docdef adjustment so far on IE 7, IE 6, Opera 9.25, FireFox 2 and FireFox 1.5 so far and all seem to handle it fine.

    Wednesday, January 9, 2008 10:00 AM
  • User-17054183 posted

    Hello, anybody solved in other way the problem?

    In order to get a correct display of our general web layout, I was obliged to comment the <DOCTYPE....> but in this way I get the same error in the position of the modal popup.

    On the other hand, if I uncomment che doctype, the modal popup is shown correctly but the web pages are not shown correctly...

    Any help is welcome.

    Thanks,

    Davide

     

    Sunday, February 3, 2008 6:16 PM
  • User-1489877752 posted

     You can easily reproduce a modal mopup with just a little CSS and JS....

    I have a little web part which displays a single image (from a Picture Library) in a modal pop-up, triggered by clicking a tumbnail:

    protected override void CreateChildControls()
            {
                base.CreateChildControls();

                this.controls.add(new LiteralControl("<a href='#'  onclick=\"javascript:document.getElementById('modal').style.width = document.body.clientWidth + 'px';document.getElementById('modal').style.height = document.body.clientHeight + 'px';document.getElementById('modal').style.display='block';document.getElementById('chart').style.display='block';\"><img src='YourUrlHere/Project%20Charts/_t/" + project + "_jpg.jpg' alt='Project Chart' /></a>"));

                this.Controls.Add(new LiteralControl("<div ID='modal' style=';top:0px;left:0px;display:none;z-index:9;background-color:#383838;filter:alpha(opacity=60);'></div><div ID='chart' style=';top:100px;left:180px;display:none;z-index:10;'><button onclick=\"javascript:document.getElementById('modal').style.display='none';document.getElementById('chart').style.display='none';\">CANCEL</button><br /><br /><img src='http://YourUrlHere/Project%20Charts/_w/" + project + "_jpg.jpg' alt='Project Chart' /></div>"));


              }         

     

    Perhaps this can be a little more elegant, but you get the idea.  A little JS thrown in the client side onclick handler calculates the browser window's size, sets the modal div to correct size, and displays it.  Since all of my images are the same size and follow a naming convention, I was able to cheat a little.  This example only works in IE, but since it is SP that is cool.  Because the IE opacity property is inherited by child elements, the modal background div cannot contain the target div (or else opacity will affect the target too), and should be empty.  It has a z-index which is higher than all of the page's elements except the target div, which is topmost. 


     

     

    Monday, January 26, 2009 6:35 PM