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

Modal Window Not showing up when inside <form> tags

2 Answers 814 Views

Window

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

Matt asked on 21 Jul 2015, 04:12 PM

I am trying to use the kendo ui window control as a modal when I press a button to display a kendo ui grid; however, when I put the control in form tags, the window doesn't display. Below is a simplified version of what I am trying to do.

We are using the latest version of Kendo UI and jQuery 2.1.14.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link rel="stylesheet" href="styles/kendo.common.min.css" />

<link rel="stylesheet" href="styles/kendo.default.min.css" />

<script src="scripts/jquery-2.1.4.min.js"></script>

<script src="Scripts/jszip.min.js"></script>

<script src="scripts/kendo.all.min.js"></script>

<script>

$(document).ready(function () {

var window = $('#window');

if (!window.data('kendoWindow')) {

window.kendoWindow({

width: "200px",

title: "Column Picker",

modal: true,

//visible: false,

position: { top: 100, left: 400 },

}).data("kendoWindow").center();

}

});

function openWindow() {

var window = $('#window');

window.data('kendoWindow').open();

};

</script>

</head>

<body>

<form id="myForm">

<button class="k-button" onclick="openWindow()">Open Window</button>

<div id="window" style="display:none;">

Test window

</div>

</form>

</body>

</html>

Modal Window Not showing up when inside <form> tags

2 Answers, 1 is accepted