如何引导弹出窗口覆盖kendo-popup？ [英] How to bootstrap pop-up override kendo-popup?
问题描述
我的一个应用程序，弹出了很多kendo窗口对话框。当点击按钮时，kendo弹出窗口打开，同时打开kendo弹出窗口，用户空闲1分钟，需要显示警告信息，哪个消息在引导程序对话框中。 Bootstrap对话框正在打开，但在kendo后面弹出它的开头。我需要在bootstrap对话框后面显示kendo pop。所以我根据我的应用程序实现创建了一个示例演示.1分钟后，bootstrap模式打开。在打开模态之前，我打开了kendo弹出窗口，但是在kendo弹出窗口后面显示它。
解决方案：
打开引导模式时我必须关闭所有的kendo-pop Else需要显示bootstrap pop在剑道窗口上面。
请查看stackoverflow。
angularjs - 如何引导弹出窗口覆盖kendo-popup - Stack溢出 [ ^ ]
演示： KendoUI®Dojoby Progress [ ^ ]
我尝试过：
one of my application,there are lots of kendo window-dialog pop up.when click the button , kendo popup is open, while opening the kendo pop up, user is idle for 1 minute, need to show the warning message, which message is in bootstrap dialog. Bootstrap dialog is opening but behind the kendo pop up its opening. I need to show the kendo pop behind bootstrap dialog. So i have created a sample demo as per my application implementation.After 1 min , the bootstrap modal is open.Before opening the modal , i have open the kendo pop up, but behind the kendo pop up it is displaying.
Solution:
I have to close all the kendo-pop while opening the bootstrap modal Else Need to show bootstrap pop-up ontop of kendo window.
Please look through stackoverflow.
angularjs - how to bootstrap pop-up override kendo-popup - Stack Overflow[^]
Demo:Kendo UI® Dojo by Progress[^]
What I have tried:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/window/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<button type="button" class="btn btn-default" id="clciks">Default</button>
<div id="modeldialog">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<label class="session-expiration">
<span>Session Expiration</span>
<img src="~/Images/Warning_Alert_Icon_26.png">
</label>
</div>
<div class="modal-body">
<div class="session-message">
<p class="time-message">your Session will expire in <span class="expire">Minutes </span>.click proceed to stay Login.</p>
<p class="time-message">Click Proceed to stay Login.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="LogOut()">Logout</button>
<button type="button" class="btn btn-primary" ng-click="proceed()">Proceed</button>
</div>
</div>
</div>
</div>
</div>
<div ng-controller="MyCtrl">
<div class="demo-section k-content">
<button class="k-button" ng-show="!win1visible" ng-click="win1.open()">Open Calendar</button>
<button class="k-button" ng-show="!win2visible" ng-click="win2.open()">Open AJAX content</button>
</div>
<div kendo-window="win1" k-title="'Calendar'" k-on-open="win1visible = true" k-on-close="win1visible = false">
<div kendo-calendar></div>
</div>
<div kendo-window="win2" k-title="'AJAX content'"
k-width="600" k-height="200" k-visible="false"
k-content="{ url: '../content/web/loremIpsum.html' }"
k-on-open="win2visible = true" k-on-close="win2visible = false"></div>
</div>
<style>
.example {
min-height: 400px;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.run(function($rootScope, $interval, $timeout) {
alert("ss");
var lastDigestRun = Date.now();
var s = lastDigestRun + 1 * 60 * 1000;
var idleCheck = $interval(function () {
var now = Date.now();
var displaytime = now - lastDigestRun > 1 * 60 * 1000;
if (now - lastDigestRun > 1 * 60 * 1000) {
$('#myModal').modal('show');
}
}, 60 * 1000);
})
.controller("MyCtrl", function($scope){
$scope.hello = "Hello from Controller!";
});
$(document).ready(function(){
$("#clciks").click(function(){
$('#myModal').modal('show');
});
});
</script>
</body>
</html>
推荐答案
rootScope，
rootScope,
interval，
timeout）{
alert（ss）;
var lastDigestRun = Date.now（）;
var s = lastDigestRun + 1 * 60 * 1000;
var idleCheck =
timeout) { alert("ss"); var lastDigestRun = Date.now(); var s = lastDigestRun + 1 * 60 * 1000; var idleCheck =
这篇关于如何引导弹出窗口覆盖kendo-popup？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
