une de mes applications, il y a beaucoup de fenêtres contextuelles de dialogue de kendo. Lorsque vous cliquez sur le bouton, la fenêtre contextuelle de kendo est ouverte, lors de l’ouverture de la fenêtre contextuelle de kendo, l’utilisateur est inactif pendant 1 minute, doit afficher le message d’avertissement, quel message est dans la boîte de dialogue d’amorçage. La boîte de dialogue Bootstrap s’ouvre mais derrière le kendo apparaît son ouverture. Je dois afficher le kendo pop derrière la boîte de dialogue bootstrap. J’ai donc créé un exemple de démo selon l’implémentation de mon application. Après 1 min, le modal d’amorçage est ouvert. Avant d’ouvrir le modal, j’ai ouvert la fenêtre contextuelle de kendo, mais derrière la fenêtre contextuelle de kendo, elle s’affiche.
Solution:
Je dois fermer tout le kendo-pop lors de l’ouverture du modal bootstrap. Sinon, il faut afficher la fenêtre contextuelle bootstrap au-dessus de la fenêtre kendo.
Veuillez consulter stackoverflow.
Angularjs – comment amorcer le remplacement du pop-up kendo-popup[^]
Démo :Kendo UI® Dojo par Progress[^]
Ce que j’ai essayé :
<!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>
Solution 1
Les popups de kendo ont généralement un ou deux divs qui s’affichent. Si la fenêtre est un modèle ou un autre type de lightbox, un gris s’affichera également.
La façon dont le kendo les amène au premier plan de l’écran consiste à définir l’index z.
Par exemple: z-index: 10003; est défini sur la fenêtre ici :Événements dans la démo de la fenêtre Kendo UI[^]
Vous devrez soit remplacer ce z-index, soit utiliser une valeur plus élevée pour votre fenêtre d’amorçage.
Le Kendo reste autour de la barre des 10 000, donc 20 000 devraient fonctionner
Solution 4
@Andy Lanng
Merci mec, super… fonctionne comme prévu !!!
Solution 5
<%-- --%>
Fermer
$(‘#searchPhoto’).click(function (id) {
// $(‘#first’).data(‘kendoWindow’).close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../Masters/customerPhotoView.aspx”);
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
J’ai autant de code lorsque l’utilisateur clique sur alt p, cette pop s’ouvrira mais elle disparaît immédiatement. Comment résoudre ce problème au moins pendant quelques secondes ou à moins que l’utilisateur ne clique sur la fenêtre de classe Comment faire cela La fenêtre contextuelle sera visible si et s’il y a seulement un champ de boîte de taxe vide qui est requis dans la zone de texte Comment faire, quel pourrait être le problème ? ?
コメント