Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Chris on Jun 04, 2008 22:35
open dhtmlx forum
does modal in dhtmlx window only with with viewport?

When I make a window and call setModal(true), it doesnt make it modal, I can still interact with windows underneath, and bring other windows on top...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Minimal Init</title>
    
    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../../codebase/fast.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_standard.css">
    
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxwindows.js"></script>
<script src="../../codebase/jquery.js"></script>
</head>
<body>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<table width="800" height="600" border="1">
<tr><td>
<button onclick="createWindow();" class="fastBlueButton">Create Window</button>
</td></tr></table>

<script>
    
    var dhxWins = new dhtmlXWindows();
    dhxWins.setImagePath("../../codebase/imgs/");

    
    var idPrefix = 1;
function closeWindow(theId) {
var theWindow = dhxWins.window(theId);
if (theWindow) {
theWindow.close();
}
return false;
}

    function createWindow() {
var x = 200;
var y = 300;
var windows = new Array();
var i=0;
        dhxWins.forEachWindow(function(theWin){
windows[i++] = theWin;
});
//if too many, close the first one
        if (i>9) {
windows[0].close();            
        }
if (i>0) {

var rand = Math.floor(Math.random()*10);
x += rand*10;
rand = Math.floor(Math.random()*10);
y += rand*10;
}
var theIdInt = idPrefix++
var theId = 'dhtmlxWindow' + theIdInt;
        var theWindow = dhxWins.createWindow(theId, x,y,400,200);
        theWindow.setText("Whatever");

var table = jQuery('<table id="something' + theIdInt + '" class="fastAlert" style="display:none" width="300"><tr valign="top"><td>'
+ '<img src="../../codebase/imgs/alert_icon_info.png" width="35"/></td><td>Some text well, <br />actionallykl<br /> jasd<br /> well, <br />actionallykl<br /> jasd<br /> well, <br />actionallykl<br /> jasd<br /> well, <br />actionallykl<br /> jasd<br /> well, <br />actionallykl<br /> jasd<br /> sld fsdflksadf ks aldfl '
+ '</td></tr><tr><td colspan="2" align="center"><button class="fastBlueButton" onclick="return closeWindow(\'' + theId + '\')" >Ok</button></td></tr></table>');
table.appendTo(document.body);

theWindow.attachObject("something" + theIdInt, true);
theWindow.setDimension(table.width() + 20, table.height() + 40);
theWindow.setMinDimension(table.width() - 20, table.height() + 40);
theWindow.setModal(true);
//setTimeout("closeWindow('" + theId + "');",5 * 1000);
    }

    
</script>

</body>
Answer posted by Support on Jun 05, 2008 05:30
The problem can't be reconstructed locally - it uses the same code , but it works fine with modality.
Please check attached sample. ( if sample works correctly for you - please try to use js files from it instead of original ones )
Attachments (1)
win_sample.zip63.67 Kb
Answer posted on Jun 05, 2008 10:00
Answer posted by Chris on Jun 05, 2008 10:01

Thanks.  There was a fix in the css file in your zip which makes it work, this part is the bad part, and if your zip is the right part:

Appreciate it, we will be buying a license soon.  Regards, Chris

/* cover for modal windows */
div.dhtmlx_winviewport iframe.dhx_modal_cover_ifr {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 opacity: 0;
 background-color: #FFFFFF;
}
div.dhtmlx_winviewport div.dhx_modal_cover_dv {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 border: none;
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 opacity: 0;
 background: #FFFFFF;
}