Page view counter

ModalPopup problem with DOCTYPE

Last post 09-01-2008 7:08 AM by MNF. 19 replies.

Sort Posts:

  • ModalPopup problem with DOCTYPE

    06-22-2006, 6:08 PM

    My application interface was built with  

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

    to avoid the "100% rendering problem with the tables" in IE. The problem is that ModalPopup wont work with this doctype. I can see the Modal perfectly in FF but in IE the popup appears in the top left corner of the screen. Is it possible to correct the ModalPopup to suport this doctype?

    Tks

    Ricardo Francisco
  • Re: ModalPopup problem with DOCTYPE

    06-23-2006, 10:36 PM

    I found the problem in ModalPopupBehaviour.js. The problem is in the folowing block:

    var clientWidth;

    if (window.innerWidth) {

    clientWidth = (window.__safari ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));

    }

    else {

    clientWidth = document.documentElement.clientWidth;

    }

    insted it should be somthing like

    var clientWidth;

    if (window.innerWidth){

    clientWidth = window.innerWidth;

    }

    else if (document.documentElement && document.documentElement.clientWidth){

    clientWidth = document.documentElement.clientWidth;

    }

    else if (document.body){

    clientWidth = document.body.clientWidth;

    }

    When using the HTML 4.0 Doctype the expression evaluated is the last one that is not part of the ModalPopupBehaviour original script.

    One other thing, i exemplified this with the width but the problem with the height is the same. Hope this can be solved in the next release.

     

    Ricardo Francisco
  • Re: ModalPopup problem with DOCTYPE

    06-23-2006, 11:04 PM

    This is the complete solution.

    Replace

    var clientWidth;

    if (window.innerWidth) {

    clientWidth = (window.__safari ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));

    }

    else {

    clientWidth = document.documentElement.clientWidth;

    }

    var clientHeight;

    if (window.innerHeight) {

    clientHeight = (window.__safari ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));

    }

    else {

    clientHeight = document.documentElement.clientHeight;

    }

    With

    var clientWidth;

    if (window.innerWidth){

    clientWidth = (window.__safari ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));

    }

    else if (document.documentElement && document.documentElement.clientWidth){

    clientWidth = document.documentElement.clientWidth;

    }

    else if (document.body){

    clientWidth = document.body.clientWidth;

    }

    else {

    clientWidth = document.documentElement.clientWidth;

    }

    var clientHeight;

    if (window.innerHeight) {

    clientHeight = (window.__safari ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));

    }

    else if (document.documentElement && document.documentElement.clientHeight){

    clientHeight = document.documentElement.clientHeight;

    }

    else if (document.body){

    clientHeight = document.body.clientHeight;

    }

    else {

    clientHeight = document.documentElement.clientHeight;

    }

     

    This way the ModalPopup will work with any doctype or even without one.

    Ricardo Francisco
  • Re: ModalPopup problem with DOCTYPE

    06-27-2006, 9:05 PM
    Thanks for the suggestion! This is now work item 643.

    http://blogs.msdn.com/Delay

    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: ModalPopup problem with DOCTYPE

    04-05-2007, 11:06 AM
    • Loading...
    • codegalaxy
    • Joined on 06-29-2004, 5:00 PM
    • Topeka (Alma), Kansas
    • Posts 1,475
    I didnt see where the controls people had fixed this and i assume they didnt - is it hard to compile this into a fix i do myself?
    Dylan Barber
    Dylan's Blog

  • Re: ModalPopup problem with DOCTYPE

    04-18-2007, 8:28 AM
    • Loading...
    • umer_farooq80
    • Joined on 04-18-2007, 12:22 PM
    • Islamabad
    • Posts 2

    I encountered the same problem and was unable to find the fix to problem. So i start doing it myself. In case of IE7 and DocType HTML 4.0 Modelpopup was unable to place itself in middle.

    The problem i detected was not in the modelpopup but was in the common function to get the document bounds (getClientBounds in Common.js). In case of IE7 it was unable to find document.documentElement.clientWidth. So i changed this function to following

     

    getClientBounds : function() {
            /// <summary>
            /// Gets the width and height of the browser client window (excluding scrollbars)
            /// </summary>
            /// <returns type="Sys.UI.Bounds">
            /// Browser's client width and height
            /// </returns>

            var clientWidth;
            var clientHeight;
            switch(Sys.Browser.agent) {
                case Sys.Browser.InternetExplorer:
                    if (document.documentElement && document.documentElement.clientWidth)
                        clientWidth = document.documentElement.clientWidth;
                    else if (document.body)
                        clientWidth = document.body.clientWidth;
                    //clientWidth = document.documentElement.clientWidth;
                    if (document.documentElement && document.documentElement.clientHeight)
                        clientHeight = document.documentElement.clientHeight;
                    else if (document.body)
                        clientHeight = document.body.clientHeight;
                    //clientHeight = document.documentElement.clientHeight;               
                    break;
                case Sys.Browser.Safari:
                    clientWidth = window.innerWidth;
                    clientHeight = window.innerHeight;
                    break;
                case Sys.Browser.Opera:
                    clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                    clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                    break;
                default:  // Sys.Browser.Firefox, etc.
                    clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                    clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                    break;
            }
            return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);
        },

     

    This fix is working well for IE7 and Firefox 2.0 in case if DOCTYPE HTML 4.0 transitional as well as in XHTML 1.0 Transitional.

  • Re: ModalPopup problem with DOCTYPE

    05-24-2007, 4:37 PM
    • Loading...
    • imbmay
    • Joined on 05-23-2007, 2:24 PM
    • Posts 1

    Thanks for posting this, worked a charm. 

  • Re: ModalPopup problem with DOCTYPE

    06-22-2007, 2:32 PM
    • Loading...
    • MarkusEm
    • Joined on 06-22-2007, 6:01 PM
    • Posts 4

    Hi,

    i had the same problem annd used your code to fix it. 

    Unfortunatly it only fixed the problem in parts. 

    After overwriting the function getClientBounds in Common.js with your code the popup apperars in the middle of the screen (without it apperar top, left), but not modal.

    The grey background starts after the last control on my website. It doesn't get on top.

    Is there any other function to update? Any other ideas?

    Thanks in advance.

  • Re: ModalPopup problem with DOCTYPE

    06-22-2007, 3:00 PM
    • Loading...
    • kirtid
    • Joined on 11-18-2006, 12:41 AM
    • Redmond
    • Posts 658
    • AspNetTeam

    The Toolkit does not support quirks mode. You should use this: 

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

    From the CollapsiblePanel demo:  

    Note: CollapsiblePanel assumes that the standard CSS box model is being used. Early versions of Internet Explorer didn't support that model completely, so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE's standards-compliant mode.

    Same applies to the ModalPopup as well.

    Kirti Deshpande
    Program Manager, Silverlight and ASP.NET AJAX
    Microsoft

    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: ModalPopup problem with DOCTYPE

    06-23-2007, 9:10 AM
    • Loading...
    • MarkusEm
    • Joined on 06-22-2007, 6:01 PM
    • Posts 4

    Hi,

    unfortunatly i can't use XHTML, because i also use a component (Intersoft webgrid), that doesn't work with XHTML.

    This component requires No Doctype or HTML 4.0.

    If there is a way to get the popup running with Doctype HTML 4.0 there must be a way to get the modal background working, too.Huh?

    I'm grateful for any help.

  • Re: ModalPopup problem with DOCTYPE

    06-25-2007, 5:14 AM
    • Loading...
    • MarkusEm
    • Joined on 06-22-2007, 6:01 PM
    • Posts 4

    I found the problem and fixed it on my own.

    Here the complete solution to get the modal popup working without Doctype:

    Use umer_farooq80's fix to get Modal popup centered: 

    //Edit getClientBounds in Common.js
    getClientBounds : function() { /// <summary> /// Gets the width and height of the browser client window (excluding scrollbars) /// </summary> /// <returns type="Sys.UI.Bounds"> /// Browser's client width and height /// </returns> var clientWidth; var clientHeight; switch(Sys.Browser.agent) { case Sys.Browser.InternetExplorer: if (document.documentElement && document.documentElement.clientWidth) clientWidth = document.documentElement.clientWidth; else if (document.body) clientWidth = document.body.clientWidth; //clientWidth = document.documentElement.clientWidth; if (document.documentElement && document.documentElement.clientHeight) clientHeight = document.documentElement.clientHeight; else if (document.body) clientHeight = document.body.clientHeight; //clientHeight = document.documentElement.clientHeight; break; case Sys.Browser.Safari: clientWidth = window.innerWidth; clientHeight = window.innerHeight; break; case Sys.Browser.Opera: clientWidth = Math.min(window.innerWidth, document.body.clientWidth); clientHeight = Math.min(window.innerHeight, document.body.clientHeight); break; default: // Sys.Browser.Firefox, etc. clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth); clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight); break; } return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight); }, Then update initialize in ModalPopupBehavior.js (change 'fixed' to 'absolute'):
      initialize : function() {
            /// <summary>
            /// Initialize the behavior
            /// </summary>
           
            /*
                <div superpopup - drag container resizable><div -- drag handle\dropshadow foreground></div></div>
            */
            AjaxControlToolkit.ModalPopupBehavior.callBaseMethod(this, 'initialize');
            this._isIE6 = (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7);
            if(this._PopupDragHandleControlID)
                this._dragHandleElement = $get(this._PopupDragHandleControlID);

            this._popupElement = $get(this._PopupControlID);
            if(this._DropShadow)
            {
                this._foregroundElement = document.createElement('div');
                this._popupElement.parentNode.appendChild(this._foregroundElement);
                this._foregroundElement.appendChild(this._popupElement);
            }
            else
            {
                this._foregroundElement = $get(this._PopupControlID);
            }
            this._backgroundElement = document.createElement('div');
            this._backgroundElement.style.display = 'none';
            this._backgroundElement.style.position = 'absolute';//'fixed';
            this._backgroundElement.style.left = '0px';
            this._backgroundElement.style.top = '0px';
            // Want zIndex to big enough that the background sits above everything else
            // CSS 2.1 defines no bounds for the <integer> type, so pick arbitrarily
            this._backgroundElement.style.zIndex = 10000;
            if (this._BackgroundCssClass) {
                this._backgroundElement.className = this._BackgroundCssClass;
            }
            this._foregroundElement.parentNode.appendChild(this._backgroundElement);

            this._foregroundElement.style.display = 'none';
            this._foregroundElement.style.position = 'fixed';
            this._foregroundElement.style.zIndex = $common.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
           
            this._showHandler = Function.createDelegate(this, this._onShow);
            $addHandler(this.get_element(), 'click', this._showHandler);

            if (this._OkControlID) {
                this._okHandler = Function.createDelegate(this, this._onOk);
                $addHandler($get(this._OkControlID), 'click', this._okHandler);
            }

            if (this._CancelControlID) {
                this._cancelHandler = Function.createDelegate(this, this._onCancel);
                $addHandler($get(this._CancelControlID), 'click', this._cancelHandler);
            }

            this._scrollHandler = Function.createDelegate(this, this._onLayout);
            this._resizeHandler = Function.createDelegate(this, this._onLayout);

            // Need to know when partial updates complete
            this.registerPartialUpdateEvents();
        }, 
  • Re: ModalPopup problem with DOCTYPE

    10-10-2007, 3:37 PM
    • Loading...
    • j4y
    • Joined on 09-12-2007, 6:02 PM
    • Boston, MA
    • Posts 2

     

    Also note:

    Any html comments before the doctype in IE 7 seem to force quirks mode.

  • Re: ModalPopup problem with DOCTYPE

    10-22-2007, 6:59 PM
    • Loading...
    • bass4g0d
    • Joined on 10-22-2007, 10:53 PM
    • Portugal
    • Posts 51

    I've downloaded the latest version from Codeplex and applied the supplied fixed. For this issue everything is ok but now, just on IE, i have extra scroll when opening the modal.  

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    I'm using the doc type due to the usage of several controls including skmmenu that on works ok with HTML 4.0 Transitional.

    Any ideas?

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.
  • Re: ModalPopup problem with DOCTYPE

    11-02-2007, 12:29 PM