如何引导弹出窗口覆盖kendo-popup？

[ad_1]

我的一个应用程序，有很多剑道窗口对话框弹出。当单击按钮时，剑道弹出窗口打开，打开剑道弹出窗口时，用户空闲1分钟，需要显示警告消息，该消息是在引导对话框中。引导对话框正在打开，但在剑道后面弹出其开口。我需要在引导对话框后面显示剑道弹出。因此，我根据我的应用程序实现创建了一个示例演示。1 分钟后，引导模式打开。在打开模式之前，我已经打开剑道弹出窗口，但在剑道弹出窗口后面它正在显示。

解决方案：

我必须在打开引导模式时关闭所有剑道流行，否则需要在剑道窗口顶部显示引导弹出窗口。

请通过 stackoverflow 查看。

angularjs – 如何引导弹出窗口覆盖kendo-popup – Thinbug[^]

演示：Kendo UI® 道场（Progress）[^]

我尝试过的：

<!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

剑道弹出窗口通常有一两个显示的 div。如果窗口是模型窗口或其他类型的灯箱，则也会显示灰色。

剑道将这些显示到屏幕前面的方法是设置 z-index。

例如： z-index: 10003; 在此处的窗口上设置：Kendo UI 窗口演示中的事件[^]

您必须覆盖此 z-index 或为引导窗口使用更高的值。

剑道坚持 10k 左右，所以 20k 应该可以

解决方案4

@安迪·兰
谢谢大佬..按预期工作！

解决方案5

<%-- --%>
关闭

$(‘#searchPhoto’).click(函数(id) {
// $(‘#first’).data(‘kendoWindow’).close();
$(‘#iframePhotoView’).attr(‘src’,
“../../../大师/customerPhotoView.aspx”）；
$(‘#ViewImage’).data(‘kendoWindow’).center().open();
});
当用户单击 alt p 时，我有这么多代码，此弹出窗口将打开，但它会立即消失。如何解决此问题至少几秒钟或除非用户单击 clase 窗口如何执行此操作如果且仅存在所需文本框的空税务框字段如何执行此操作这可能是什么问题？？

[ad_2]