كيفية التمهيد لتجاوز النوافذ المنبثقة kendo-popup؟

أحد تطبيقاتي، هناك الكثير من النوافذ المنبثقة لمربع حوار kendo. عند النقر فوق الزر، تكون نافذة kendo المنبثقة مفتوحة، أثناء فتح نافذة kendo المنبثقة، يكون المستخدم خاملاً لمدة دقيقة واحدة، ويحتاج إلى إظهار رسالة التحذير، ما هي الرسالة في حوار التمهيد. يتم فتح مربع حوار Bootstrap ولكن يظهر خلف نافذة kendo. أحتاج إلى إظهار kendo pop خلف مربع حوار bootstrap. لذلك قمت بإنشاء نموذج تجريبي وفقًا لتنفيذ تطبيقي. بعد دقيقة واحدة، يكون نموذج bootstrap مفتوحًا. قبل فتح النموذج، قمت بفتح نافذة kendo المنبثقة، ولكن يتم عرضها خلف نافذة kendo المنبثقة.

حل:

لا بد لي من إغلاق جميع عناصر kendo-pop أثناء فتح نموذج bootstrap. وإلا، أحتاج إلى إظهار نافذة bootstrap المنبثقة أعلى نافذة kendo.

يرجى النظر من خلال Stackoverflow.

angularjs – كيفية التمهيد لتجاوز النوافذ المنبثقة kendo-popup – Stack Overflow[^]

العرض التوضيحي:Kendo UI® Dojo بواسطة التقدم[^]

ما حاولت:

<!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
الحل 4
الحل 5

الحل 1

تحتوي نوافذ kendo العامة على قسم أو قسمين يتم عرضهما. إذا كانت النافذة نموذجية، أو أي نوع آخر من العرض المبسط، فسيتم عرض اللون الرمادي أيضًا.

الطريقة التي ينقل بها kendo هذه العناصر إلى مقدمة الشاشة هي عن طريق ضبط مؤشر z.

على سبيل المثال: z-index: 10003; تم وضعها على النافذة هنا:الأحداث في عرض نافذة Kendo UI[^]

سيتعين عليك إما تجاوز مؤشر z هذا أو استخدام قيمة أعلى لنافذة التمهيد الخاصة بك.

عصا Kendo حول علامة 10 كيلو لذا يجب أن تعمل 20 كيلو

الحل 4

@ آندي لانج
شكرا للرجل عظيم .. يعمل كما هو متوقع !!!

الحل 5

<%---%>
يغلق

$(‘#searchPhoto’).انقر(وظيفة (معرف) {
// $(‘#first’).data(‘kendoWindow’). Close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../Masters/customerPhotoView.aspx”);
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
لدي الكثير من التعليمات البرمجية عندما ينقر المستخدم على alt p، سيتم فتح هذا البوب ولكنه يختفي على الفور. كيفية حل هذه المشكلة على الأقل لبضع ثوان أو ما لم ينقر المستخدم على نافذة clase كيفية القيام بذلك ستصبح النافذة المنبثقة مرئية إذا كان هناك فقط حقل فارغ في مربع الضرائب الذي يتطلب مربع نص كيف تفعل هذا، ما الذي قد يكون مشكلة؟ ؟