một trong những ứng dụng của tôi, có rất nhiều hộp thoại cửa sổ kendo bật lên. Khi nhấp vào nút, cửa sổ bật lên kendo đang mở, trong khi mở cửa sổ bật lên kendo, người dùng không hoạt động trong 1 phút, cần hiển thị thông báo cảnh báo, thông báo nào là trong hộp thoại bootstrap. Hộp thoại Bootstrap đang mở nhưng đằng sau kendo bật lên phần mở đầu của nó. Tôi cần hiển thị hộp thoại kendo pop phía sau bootstrap. Vì vậy, tôi đã tạo một bản demo mẫu theo quá trình triển khai ứng dụng của mình. Sau 1 phút, chế độ bootstrap mở. Trước khi mở chế độ, tôi đã mở cửa sổ bật lên kendo, nhưng đằng sau cửa sổ bật lên kendo nó đang hiển thị.
Giải pháp:
Tôi phải đóng tất cả kendo-pop trong khi mở chế độ bootstrap Khác Cần hiển thị cửa sổ bật lên bootstrap trên đầu cửa sổ kendo.
Vui lòng xem qua stackoverflow.
javascript — Angularjs – cách khởi động ghi đè cửa sổ bật lên kendo-popup[^]
Thử nghiệm:Kendo UI® Dojo theo tiến độ[^]
Những gì tôi đã thử:
<!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 "timer" class="fa fa-clock-o">.click proceed to stay Login.</p>
<p class="time-message">^__b>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>
Giải pháp 1
Cửa sổ bật lên kendo nói chung có một hoặc hai div được hiển thị. Nếu cửa sổ là kiểu máy hoặc một số loại hộp đèn khác thì màu xám cũng sẽ hiển thị.
Cách kendo đưa những thứ này lên phía trước màn hình là bằng cách đặt chỉ mục z.
Ví dụ: z-index: 10003; được đặt trên cửa sổ ở đây:Các sự kiện trong bản demo Cửa sổ giao diện người dùng Kendo[^]
Bạn sẽ phải ghi đè chỉ mục z này hoặc sử dụng giá trị cao hơn cho cửa sổ khởi động của mình.
Kendo bám sát mốc 10k nên 20k sẽ hiệu quả
Giải pháp 4
@Andy Lanng
Cảm ơn người đàn ông tuyệt vời.. hoạt động như mong đợi!!!
Giải pháp 5
<%-- --%>
Đóng
$(‘#searchPhoto’).click(function (id) {
// $(‘#first’).data(‘kendoWindow’).close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../Masters/customerPhotoView.aspx”);
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
Tôi có nhiều mã này khi người dùng Nhấp vào alt p cửa sổ bật lên này sẽ mở nhưng nó sẽ biến mất ngay lập tức. Cách giải quyết vấn đề này ít nhất trong vài giây hoặc cho phép người dùng nhấp vào cửa sổ clase Cách thực hiện Điều này Cửa sổ bật lên sẽ hiển thị nếu và nếu chỉ có trường hộp taxt trống dành cho Hộp văn bản bắt buộc Cách thực hiện. Vấn đề có thể là gì? ?
コメント