RadWindow Overlay Manipulation (or issue)

4 posts, 0 answers
  1. Craig
    Craig avatar
    14 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

    Hi,
    I have a RadWindow which opens with Modal=true in the centre of my screen.  An overlay accompanies the modal window just before the closing form tag as usual...

    The problem is... when I resize my browser, the overlay is happy to increase in size... but when I resize the browser back to the original position I am shown scrollbars.  It seems that the overlay is capable of increasing in size dynamically, but not decreasing dynamically.

    I'm not sure if this is a bug... I cannot think of a reason why growth would be needed but not vice versa...

    Does anyone know how I can manipulate this overlay?  The increase in height and width of the overlay must be set using some Telerik javascript.  I have tried accessing this DOM element and setting the height and width through JQuery, but I cannot seem to get access to the div overlay itself (in the resize browser event) although I can access this using exactly the same syntax in Chrome console after the page has fully loaded! (Could this be because I am attempting to manipulate a div via JQuery with an attribute of unselectable="on" ?)

    Can anyone help me to resize the overlay when reducing the size of the window please?

    Kind Regards

    Craig
  2. Ianko
    Admin
    Ianko avatar
    1887 posts

    Posted 01 Nov 2013 Link to this post

    Hello Craig,

    You are correct, the modal overlay of the window extends the body element. This is why the scrollbars appear after window resizing.

    You could try if the following example setup adjusts the behavior to your expectations:
    <telerik:RadWindow runat="server" ID="RadWindow1"
        VisibleOnPageLoad="true" Modal="true">
        <ContentTemplate>
            <h1>Some content</h1>
        </ContentTemplate>
    </telerik:RadWindow>
     
    <script type="text/javascript">
        Sys.Application.add_load(function () {
            var windowControl =$find("<%= RadWindow1.ClientID %>");
     
            $telerik.addExternalHandler(window, "resize", function (e) {
                windowControl.center();
                windowControl.set_modal(false);
                windowControl.set_modal(true);
            });
        });
    </script>


    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. panarat
    panarat avatar
    1 posts
    Member since:
    Apr 2019

    Posted 30 Apr Link to this post

    when i apply these set_modal command in the code then i cannot fill out anything in the textbox at all. On the phone, once i touch on the textbox to fill in the form then the keyboard just show up 1s then disappeared and the cursor does not stay in the textbox at all.

    Look like textbox is losing the focus ability. help plz

  4. Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 03 May Link to this post

    Hi Panarat,

    Here is an example showing how to keep the keyboard visible when clicking on a textbox:

    <telerik:RadWindow runat="server" ID="RadWindow1"
        VisibleOnPageLoad="true" Modal="true">
        <ContentTemplate>
            <h1>Some content</h1>
            <input  type="text" />
            <input  type="text" />
     
        </ContentTemplate>
    </telerik:RadWindow>
      
    <script type="text/javascript">
        Sys.Application.add_load(function () {
            var windowControl =$find("<%= RadWindow1.ClientID %>");
      
            $telerik.addExternalHandler(window, "resize", function (e) {
     
                windowControl.center();
                windowControl.set_modal(false);
                windowControl.set_modal(true);
                 
            });
        });
     
       
        var $T = Telerik.Web.UI;
        Telerik.Web.UI.RadWindow.prototype._makeModal = function (bModal) {
             
            //Dispose of old state, whatever it was
            if (this._onModalShowHandler) {
                this.remove_show(this._onModalShowHandler);
                this._onModalShowHandler = null;
            }
     
            if (this._onModalCloseHandler) {
                this.remove_close(this._onModalCloseHandler);
                this._onModalCloseHandler = null;
            }
     
            if (this._modalExtender) {
                this._modalExtender.dispose();
                this._modalExtender = null;
            }
     
            //Return if modality should be turned off
            if (!bModal) return;
     
            //if it is an instance of window manager, return, we do not want associated events with the manager
            if (typeof ($T.RadWindowManager) != "undefined" && $T.RadWindowManager.isInstanceOfType(this)) {
                return;
            }
     
            this._onModalShowHandler = function (sender) {
                //Create the modal overlay here, becase it needs to be passed an existing html this._popupElement
                if (!sender._modalExtender) {
                    var popup = sender._popupElement;
                    var isAccessible = sender.get_enableAriaSupport();
                    sender._modalExtender = new $T.ModalExtender(popup, {
                        enableAriaSupport: isAccessible,
                        getNodesToHide: function () {
                            return $(popup).nextAll(":not(script,link)").get();
                        },
                        trapTabKey: isAccessible
                    });
                }
     
     
                //Show the modal overlay
                sender._modalExtender.show();
     
                //NEW - under IE and FF, the focused element should lose when the modal RadWindow is shown
                //store it in a filed to restore it when the RadWindow is closed
                var focusedElement = null;
                try {
                    focusedElement = document.activeElement;
                }
                catch (ex) {
                    document.documentElement.focus();
                    focusedElement = document.activeElement;
                }
                //if the focused element is the body no need to blur, furthermore blurring it causes IE to minimize
                if (focusedElement && focusedElement.tagName && focusedElement.tagName.toLowerCase() != "body") {
                    //if in dock mode and the focused element is in the RadWindow, do not remove the focus
                    var toBlurDockMode = (!$telerik.isDescendant(this._contentElement, focusedElement) && this._dockMode);
                    //if predefined - do nothing, handled by the manager
                    if (!(sender._isPredefined) || toBlurDockMode) {
                        sender._focusedPageElement = focusedElement;
                        setTimeout(function () {
                            focusedElement.scrollIntoView();
                        }, 100);
                        //focusedElement.blur();
                    }
                }
     
                //Re-center because of Mozilla
                if (sender.get_centerIfModal()) {
                    sender.center();
                }
            };
            this.add_show(this._onModalShowHandler);
     
     
            this._onModalCloseHandler = function (sender) {
                //Hide the modal overlay
                //It is crucial to use a timeout - or else IE crashes when closing a modal window opened from another modal window
                window.setTimeout(function () {
                    if (sender._modalExtender) sender._modalExtender.hide();
                    var focusedElement = sender._focusedPageElement;
                    if (focusedElement) {
                        try {
                            focusedElement.focus();
                        }
                        catch (ex) { }
                        sender._focusedPageElement = null;
                    }
                }, 10);
            };
            this.add_close(this._onModalCloseHandler);
        }
    </script>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top