jqxWindow and jqxLoader - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by pepe 6 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

jqxWindow and jqxLoader Posts
March 24, 2019 at 9:32 pm jqxWindow and jqxLoader #104460

pepe
Participant

Good night, I have a window with a button and clicking on it appears loading, the problem is that the window stays in the foreground. How could I put the window under loading?

Thank you

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css”/>
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxloader.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
$(“#jqxwindow “).jqxWindow({
height:130,
width: 250,
});

$(“#openLoader”).jqxButton({
width: 150
});

$(“#jqxLoader”).jqxLoader({
isModal: true,
width: 100,
height: 60,
imagePosition: ‘top’
});

$(‘#openLoader’).on(‘click’, function () {
$(‘#jqxLoader’).jqxLoader(‘open’);
});
});
</script>
</head>
<body>

<div id=’jqxwindow’>
<div>Header</div>
<div>
<input type=”button” value=”Open Loader” id=”openLoader” />
</div>
</div>

<div id=”jqxLoader”></div>

</body>
</html>

March 26, 2019 at 8:57 am jqxWindow and jqxLoader #104482
Todor
Participant
Hello pepe,

There are two solutions for your request which include changing z-index:

1) You could add zIndex: 99 to jqxWindow properties
2) You could add the following css code:
```
.jqx-loader {
  z-index: 9999;
}

.jqx-loader-modal {
  z-index: 9998;
}
```
which changes z-index of jqx-loader and jqx-loader-modal

I have updated your example, with both cases included. Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com
March 31, 2019 at 6:20 pm jqxWindow and jqxLoader #104605

pepe
Participant

Thank you very much for the answer. A greeting.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.