Window set to modal but does not display overlay or behave modal.

2 posts, 1 answers
  1. Jon
    Jon avatar
    73 posts
    Member since:
    Oct 2013

    Posted 23 May 2018 Link to this post

    Hi I have a hidden div that is initiated as a popup window.

    The window works fine - dynamically changed title, centre and opens. Unfortunately despite it being set as modal: true it does not display the overlay or behave as a modal.

    Below is a html file that demonstrates my problem... Where have I gone wrong?

    <!DOCTYPE html>
     
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
     
        <link href="http://localhost/DCHR_MVC/Content/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="http://localhost/DCHR_MVC/Content/font-awesome.css" rel="stylesheet" type="text/css" />
     
        <link href="http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <link href="http://localhost/DCHR_MVC/Content/kendo/2018.2.516/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="http://localhost/DCHR_MVC/CSS/SiteStyles.css" rel="stylesheet" type="text/css" />
     
        <script src="http://localhost/DCHR_MVC/Scripts/umd/popper.js"></script>
        <script src="http://localhost/DCHR_MVC/Scripts/respond.js"></script>
     
     
    </head>
    <body>
     
        <div class="btn-group">
            <button id="btnCapacity" type="button" class="btn btn-info" data-toggle="tooltip" onclick="approveDCHR('Capacity')">Capacity Approval</button>
            <button id="btnTechnical" type="button" class="btn btn-secondary" data-toggle="tooltip" onclick="approveDCHR('Technical')">Technical Approval</button>
            <button id="btnOverall" type="button" class="btn btn-primary" data-toggle="tooltip" onclick="approveDCHR('Overall')">Overall Approval</button>
        </div>
     
        <div id="approvalWindow" style="display:none;">
            <div class="card">
                <div class="card-header">Comments <i class="fa fa-info-circle" data-toggle="tooltip" title="Approval Comments (mandatory)"></i></div>
                <div class="card-body">
                    <textarea id="nApprovalComments" class="form-control w-95" placeholder="Please enter comments"></textarea>
                </div>
            </div>
            <div class="card">
                <div class="card-header">Approved By <i class="fa fa-info-circle" data-toggle="tooltip" title="Approved By (cannot be changed)"></i></div>
                <div class="card-body">
                    <input id="nApprovalBy" class="form-control w-95" readonly />
                </div>
            </div>
            <div class="card">
                <div class="card-header">Date <i class="fa fa-info-circle" data-toggle="tooltip" title="Date approved (cannot be changed)"></i></div>
                <div class="card-body">
                    <input id="nApprovalDate" class="form-control w-95" readonly />
                </div>
            </div>
            <div class="card">
                <div class="btn-group justify-content-between">
                    <button class="btn btn-info w-25" onclick="approvalClose()">Cancel</button>
                    <button class="btn btn-warning w-25" onclick="approvalClear()">Clear</button>
                    <button class="btn btn-success w-25" onclick="approvalSave()">Save</button>
                </div>
            </div>
        </div>
     
    </body>
    </html>
     
    <script>
     
        var approvalWindow = $("#approvalWindow");
     
        function approveDCHR(stage) {
            // reset the appovals window to default values
            approvalClear();
            //set window title and open centered on screen
            var wnd = approvalWindow.kendoWindow().data("kendoWindow");
            console.log(wnd);
            wnd.title(stage + " Approval");
            wnd.refresh();
            wnd.center();
            wnd.open();
     
            //make texarea autogrow - requires jquery.ns-autogrow - https://github.com/ro31337/jquery.ns-autogrow
            //$('#nApprovalComments').autogrow({ vertical: true, horizontal: false });
        }
     
        function approvalClose() {
            approvalWindow.kendoWindow().data("kendoWindow").close();
        }
     
        function approvalClear() {
            // reset the appovals window to default values
            $('#nApprovalComments').val("");
            $('#nApprovalBy').val("");
            $('#nApprovalDate').val(new Date());
        }
     
        function approvalSave() {
            approvalWindow.kendoWindow().data("kendoWindow").close();
        }
     
        $(document).ready(function () {
     
            //initiate popup window
            approvalWindow.kendoWindow({
                width: "570px",
                title: "Approval",
                actions: "",
                modal: true,
                visible: false
            }).data("kendoWindow").close();
     
        });
     
    </script>
  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2112 posts

    Posted 25 May 2018 Link to this post

    Hello Jon,

    The issue with the modal option not being applied to the Window is caused by the widget's re-initialization. You are initializing the Window in a document-ready handler, so there is no need for the Window to be re-initialized in the approveDCHR, approvalClose and approvalSave handlers. The following changes in the three of the handlers should fix the issue:
    function approveDCHR(stage) {
        // reset the appovals window to default values
        approvalClear();
        //set window title and open centered on screen
        //var wnd = approvalWindow.kendoWindow().data("kendoWindow");
        var wnd = approvalWindow.data("kendoWindow");
        console.log(wnd);
        wnd.title(stage + " Approval");
        wnd.refresh();
        wnd.center();
        wnd.open();
     
        //make texarea autogrow - requires jquery.ns-autogrow - https://github.com/ro31337/jquery.ns-autogrow
        //$('#nApprovalComments').autogrow({ vertical: true, horizontal: false });
    }
      
    function approvalClose() {
       //approvalWindow.kendoWindow().data("kendoWindow").close();
      approvalWindow.data("kendoWindow").close();
    }
     
    function approvalClear() {
        // reset the appovals window to default values
        $('#nApprovalComments').val("");
        $('#nApprovalBy').val("");
        $('#nApprovalDate').val(new Date());
    }
     
    function approvalSave() {
      //approvalWindow.kendoWindow().data("kendoWindow").close();
      approvalWindow.data("kendoWindow").close();
    }

    Highlighted in green is how a proper reference to the Window should be obtained, whereas in orange is the re-initialization of the Window before getting a reference to it, which causes the issue. At my end these changes fix the issue and the Window's modality works as expected. Let me know whether it works at your end as well.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top