This is a migrated thread and some comments may be shown as answers.

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

1 Answer 158 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 23 May 2018, 09:01 PM

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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 25 May 2018, 08:46 AM
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.
Tags
Window
Asked by
Jon
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or