salah satu aplikasi saya, ada banyak pop up dialog jendela kendo. ketika mengklik tombol, popup kendo terbuka, saat membuka pop up kendo, pengguna menganggur selama 1 menit, perlu menampilkan pesan peringatan, pesan mana yang dalam dialog bootstrap. Dialog bootstrap terbuka tetapi di belakang kendo muncul pembukaannya. Saya perlu menampilkan kendo pop di balik dialog bootstrap. Jadi saya telah membuat contoh demo sesuai implementasi aplikasi saya. Setelah 1 menit, modal bootstrap terbuka. Sebelum membuka modal, saya telah membuka pop up kendo, tetapi di belakang pop up kendo itu ditampilkan.
Larutan:
Saya harus menutup semua kendo-pop saat membuka modal bootstrap. Jika tidak, perlu menampilkan pop-up bootstrap di atas jendela kendo.
Silakan lihat melalui stackoverflow.
c.angularjs – cara bootstrap pop-up override kendo-popup[^]
Demo:Kendo UI® Dojo berdasarkan Kemajuan[^]
Apa yang saya coba:
<!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>
Solusi 1
popup kendo umum memiliki satu atau dua div yang ditampilkan. Jika jendelanya adalah model, atau jenis lightbox lainnya, warna abu-abu juga akan ditampilkan.
Cara kendo menampilkannya di depan layar adalah dengan mengatur indeks-z.
Misalnya: z-index: 10003; diatur pada jendela di sini:Acara di demo Jendela Kendo UI[^]
Anda harus mengganti indeks-z ini atau menggunakan nilai yang lebih tinggi untuk jendela bootstrap Anda.
Kendo bertahan di angka 10k jadi 20k seharusnya berhasil
Solusi 4
@Andy Lanng
Terima kasih kawan, hebat.. berfungsi seperti yang diharapkan!!!
Solusi 5
<%-- --%>
Menutup
$(‘#searchPhoto’).klik(fungsi (id) {
// $(‘#first’).data(‘kendoWindow’).close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../Masters/customerPhotoView.aspx”);
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
Saya memiliki kode sebanyak ini ketika pengguna mengklik alt p pop ini akan terbuka tetapi segera menghilang. Bagaimana Mengatasi Ini Setidaknya selama beberapa detik atau Kecuali jika pengguna mengklik jendela clase Bagaimana Melakukannya Pop up akan terlihat jika dan jika hanya ada bidang kotak pajak kosong yang diperlukan Kotak Teks Bagaimana Melakukannya Apa masalahnya? ?
コメント