How to bootstrap pop-up override kendo-popup?

Question

0.00/5 (No votes)

See more:

, +

one of my application,there are lots of kendo window-dialog pop up.when click the button , kendo popup is open, while opening the kendo pop up, user is idle for 1 minute, need to show the warning message, which message is in bootstrap dialog. Bootstrap dialog is opening but behind the kendo pop up its opening. I need to show the kendo pop behind bootstrap dialog. So i have created a sample demo as per my application implementation.After 1 min , the bootstrap modal is open.Before opening the modal , i have open the kendo pop up, but behind the kendo pop up it is displaying.

Solution:

I have to close all the kendo-pop while opening the bootstrap modal Else Need to show bootstrap pop-up ontop of kendo window.

Please look through stackoverflow.

angularjs - how to bootstrap pop-up override kendo-popup - Stack Overflow[^]

Demo:Kendo UI® Dojo by Progress[^]

What I have tried:

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

Posted 2-Jan-17 23:58pm

Sahir Mohamed

Updated 3-Jan-17 1:18am

Andy Lanng

v2

Add a Solution

3 solutions

Solution 4

@Andy Lanng
Thank man great.. works as expected!!!

Posted 3-Jan-17 1:18am

Sahir Mohamed

Solution 5

<%-- --%>
Close

$('#searchPhoto').click(function (id) {
// $('#first').data('kendoWindow').close();
$('#iframePhotoView').attr('src',
"../../../Masters/customerPhotoView.aspx");
$('#ViewImage').data('kendoWindow').center().open();
});
I have this much of code when user Clicks alt p this pop will get Open But Its is disappearing immediately. How To solve This Atleast for few second or Unles user clicks clase window How To Do THis The pop up will get visible if and if there is only there is empty taxt box field that to required Textbox How To do THis what might be the problem ??

Posted 27-Feb-24 0:45am

Member 16211122

Comments

Richard Deeming 27-Feb-24 6:58am

If you want to ask a question, then ASK A QUESTION[^]. DO NOT post your question as a "solution" to someone else's question!

But you're going to need to provide A LOT more information than you have here if you want anyone to be able to help you.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Accepted Answer · 2017-01-03T00:14:00

kendo popups general have one or two divs that get displayed. If the window is model, or some other type of lightbox, then a greyout will display also.

The way kendo gets these to the front of the screen is by setting the z-index.

for example: z-index: 10003; is set on the window here:Events in Kendo UI Window demo[^]

You will either have to override this z-index or use a higher value for your bootstrap window.

Kendo stick around the 10k mark so 20k should work