मेरे एक एप्लिकेशन में, बहुत सारे केन्डो विंडो-डायलॉग पॉप अप हैं। बटन पर क्लिक करने पर, केन्डो पॉपअप खुल जाता है, केन्डो पॉप अप खोलते समय, उपयोगकर्ता 1 मिनट के लिए निष्क्रिय रहता है, चेतावनी संदेश दिखाने की आवश्यकता है, कौन सा संदेश है बूटस्ट्रैप संवाद में. बूटस्ट्रैप संवाद खुल रहा है लेकिन केन्डो के पीछे इसका उद्घाटन पॉप अप हो गया है। मुझे बूटस्ट्रैप संवाद के पीछे केंडो पॉप दिखाने की जरूरत है। इसलिए मैंने अपने एप्लिकेशन कार्यान्वयन के अनुसार एक नमूना डेमो बनाया है। 1 मिनट के बाद, बूटस्ट्रैप मोडल खुला है। मोडल खोलने से पहले, मैंने केंडो पॉप अप खोला है, लेकिन केंडो पॉप अप के पीछे यह प्रदर्शित हो रहा है।
समाधान:
मुझे बूटस्ट्रैप मोडल खोलते समय सभी केंडो-पॉप को बंद करना होगा अन्यथा केंडो विंडो के शीर्ष पर बूटस्ट्रैप पॉप-अप दिखाने की आवश्यकता होगी।
कृपया स्टैकओवरफ़्लो देखें।
AngularJS – बूटस्ट्रैप पॉप-अप ओवरराइड केंडो-पॉपअप कैसे करें – उत्कृष्ट पुस्तकालय[^]
डेमो:प्रोग्रेस द्वारा केंडो यूआई® डोजो[^]
मैंने क्या प्रयास किया है:
<!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>
समाधान 1
केन्डो पॉपअप में सामान्यतः एक या दो डिव प्रदर्शित होते हैं। यदि विंडो मॉडल है, या किसी अन्य प्रकार का लाइटबॉक्स है, तो एक ग्रेआउट भी प्रदर्शित होगा।
जिस तरह से केन्डो इन्हें z-इंडेक्स सेट करके स्क्रीन के सामने लाता है।
उदाहरण के लिए: z-index: 10003; यहाँ विंडो पर सेट है:केंडो यूआई विंडो डेमो में इवेंट[^]
आपको या तो इस z-इंडेक्स को ओवरराइड करना होगा या अपनी बूटस्ट्रैप विंडो के लिए उच्च मान का उपयोग करना होगा।
केन्डो 10 हजार के निशान के आसपास बना हुआ है इसलिए 20 हजार काम करेगा
समाधान 4
@एंडी लैंग
बहुत बहुत धन्यवाद आदमी.. उम्मीद के मुताबिक काम करता है!!!
समाधान 5
<%-- --%>
बंद करना
$(‘#searchPhoto’).क्लिक करें(फ़ंक्शन (आईडी) {
// $(‘#first’).data(‘kendoWindow’).close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../Masters/customerPhotoView.aspx”);
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
मेरे पास इतना कोड है कि जब उपयोगकर्ता ऑल्ट पी पर क्लिक करेगा तो यह पॉप ओपन हो जाएगा लेकिन यह तुरंत गायब हो रहा है। इसे कैसे हल करें कम से कम कुछ सेकंड के लिए या जब तक उपयोगकर्ता क्लास विंडो पर क्लिक नहीं करता यह कैसे करें पॉप अप दिखाई देगा यदि वहां केवल खाली टैक्स बॉक्स फ़ील्ड है जो आवश्यक टेक्स्टबॉक्स के लिए है यह कैसे करें क्या समस्या हो सकती है? ?
コメント