I'm using Kendo UI, and I want to make modal dialog popup on a button click. However it works fine 1st time, but when I close dialog and click open button again screen fades, but windows is very small, few pixels in width and height.
This is my code:
<div id="progressDialog">
<p>
blah blah
</p>
</div>
<script>
$(document).ready(function() {
var dlg = $("#progressDialog").kendoWindow({
actions: ["Custom", "Pin", "Refresh", "Maximize", "Minimize", "Close"],
draggable: false,
height: "300px",
modal: true,
pinned: false,
position: {
top: 100,
left: 100
},
resizable: false,
title: "Modal Window",
width: "500px"
});
$("#someGrid").kendoGrid({
...
dataBound: function(e){
$("#showButton").unbind('click').click(function(){
dlg.data("kendoWindow").open();
}
}
...
});
});
</script>
This $("#showButton") part is inside of kendoGrid initialized in dataBound event if that is important. There are also other windows on the page so maybe there is some collision, idk... But it works fine 1st time showButton is clicked, but when I close modal and try for 2nd time it shows very very small square.
EDIT: just noticed there is this property in inline css style added: transform: scale(0.01). I could remove it with JavaScript, but why is added?