Möchte man den ModalPopupExtender aus dem ASP.NET AJAX Control Toolkit verwenden, dann geht das nur mit dem DOCTYPE “XHTML 1.0 Transitional” so richtig reibungslos. Beim CollapsiblePanel gibt es dazu einen Hinweis in der Dokumentation, beim ModalPopup fehlt dieser Hinweis. Das Problem besteht aber auch dort.

Symptome: Das Popup wird nicht korrekt positioniert, zentriert sich nicht und viel zu lange Scrollbalken entstehen.

Gerade wenn man WebParts für SharePoint erstellt, hat man aber nicht immer Einfluss auf den DOCTYPE. Oder wenn man schon Einfluss auf den DOCTYPE hat, kann man ihn nicht immer einfach so ändern, weil dann evtl. andere Komponenten nicht mehr richtig funktionieren oder nicht mehr richtig dargestellt werden.

Der beschriebene Workaround aus der Dokumentation des AJAX Control Toolkit fällt damit als Lösung für uns aus.

Ein anderer Lösungsweg ist, ein Custom Build des ASP.NET AJAX Control Toolkit zu erstellen und darin das “fehlerhafte” Stück JavaScript zu korrigieren.

Dazu besorgt man sich den Quellcode via Codeplex und nimmt die folgenden zwei Modifkationen vor:

• AjaxControlToolkit\Common\Common.js 
  • Darin sucht man nach “getClientBounds” und ersetzt das in der Funktion enthaltene SWITCH Statement durch folgendes:

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

    Diese Modifikation bringt dem Toolkit bei, Höhe und Breite ein bisschen besser auszulesen.  

    Achtung:

    Hat man bereits an anderen Stellen im eigenen Code Anpassungen aufgrund dieses Problems vorgenommen, indem man z.B. via CSS oder JavaScript nachträglich die Position eines AutoComplete Feldes korrigiert, so ist dies jetzt möglicherweise nicht mehr notwendig und/oder funktioniert nicht mehr richtig. Hier also nochmal kontrollieren!

• AjaxControlToolkit\ModalPopupExtender\ModalPopupBehavior.js 
  • Dort in der “initialize” Funktion folgende Ersetzungen vornehmen: 

    this._backgroundElement.style.position = 'fixed';

     ersetzen zu

    this._backgroundElement.style.position = 'absolute';//'fixed';

    Ein paar Zeilen weiter unten:

    his._foregroundElement.style.position = 'fixed';

    ersetzen zu

    this._foregroundElement.style.position = 'absolute';//'fixed';

    Diese Modifikation beeinflusst andere Controls nicht, und sorgt nur für die ordentliche Positionierung des Popups.

Außerdem zu beachten:

Wenn man das Control Toolkit mit dem mitgelieferten Schlüssel kompiliert, so wir der selbe PublicKeyToken wie beim Original erzeugt. Daraus entstünde dann möglicherweise folgendes Problem:

Verwenden andere Komponenten auf dem Server auch das AJAX Control Toolkit, so bekommen sie die oben vorgenommenen Änderungen durchgereicht, sofern sie nicht explizit gegen eine bestimmte Version kompiliert wurden.

Man sollte also lieber einen neuen PublicKeyToken erzeugen, um möglichen Kompatibilitätsproblemen im Voraus zu entgehen.

Quelle:

Ramesh Bhaskar – Fixing modalpopupextender position problems