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 887 Views

Window

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

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/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 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 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 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>

</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

Accepted

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.