En una de mis aplicaciones, hay muchas ventanas emergentes de diálogo de kendo. Cuando hace clic en el botón, la ventana emergente de kendo se abre, al abrir la ventana emergente de kendo, el usuario está inactivo durante 1 minuto, debe mostrar el mensaje de advertencia, cuyo mensaje es en el diálogo de arranque. El cuadro de diálogo Bootstrap se está abriendo, pero detrás del kendo aparece su apertura. Necesito mostrar el kendo pop detrás del cuadro de diálogo de arranque. Así que creé una demostración de muestra según la implementación de mi aplicación. Después de 1 minuto, el modal de arranque está abierto. Antes de abrir el modal, abrí la ventana emergente de kendo, pero detrás de la ventana emergente de kendo se muestra.
Solución:
Tengo que cerrar todo el kendo-pop mientras abro el modo bootstrap. De lo contrario, necesito mostrar la ventana emergente bootstrap en la parte superior de la ventana de kendo.
Mire a través de stackoverflow.
angularjs – cómo arrancar la ventana emergente anular kendo-popup[^]
Manifestación:Kendo UI® Dojo de Progress[^]
Lo que he probado:
<!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>
Solución 1
Las ventanas emergentes de kendo generalmente tienen uno o dos divs que se muestran. Si la ventana es un modelo o algún otro tipo de caja de luz, también se mostrará un tono gris.
La forma en que kendo los lleva al frente de la pantalla es configurando el índice z.
Por ejemplo: z-index: 10003; está configurado en la ventana aquí:Eventos en la demostración de la ventana Kendo UI[^]
Tendrá que anular este índice z o utilizar un valor más alto para su ventana de arranque.
Kendo se mantiene alrededor de la marca de 10k, por lo que 20k debería funcionar
Solución 4
@Andy Lanng
Gracias amigo. ¡¡¡Funciona como se esperaba!!!
Solución 5
<%-- --%>
Cerca
$(‘#searchPhoto’).click(función (id) {
// $(‘#first’).data(‘kendoWindow’).close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../Masters/customerPhotoView.aspx”);
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
Tengo esta cantidad de código cuando el usuario hace clic en alt p, esta ventana emergente se abre, pero desaparece inmediatamente. Cómo resolver esto Al menos durante unos segundos o a menos que el usuario haga clic en la ventana de clase Cómo hacer esto La ventana emergente se hará visible si solo hay un campo de cuadro de impuestos vacío que se requiere Cuadro de texto Cómo hacer esto ¿Cuál podría ser el problema? ?
コメント