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/jquery-3.3.1.min.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/umd/popper.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/bootstrap.min.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/respond.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/kendo/2018.2.516/jszip.min.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/kendo/2018.2.516/kendo.all.min.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/kendo/2018.2.516/kendo.aspnetmvc.min.js"></script> <script src="http://localhost/DCHR_MVC/Scripts/kendo.modernizr.custom.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
0
Accepted
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:
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
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.