1

I want my JavaScript window (Date-picker) to be on top of all the window (till I select the date or close it). Require Guidance

Kiquenet
  • 14,494
  • 35
  • 148
  • 243
user3300851
  • 87
  • 1
  • 3
  • 12

3 Answers3

0

If Date-picker window refers to an element within the html then this should do it.

CSS for date div

z-index: 20;

CSS for other div

z-index: 10;

Then you just show or hide the date div and it will always stay on top.

Do you need it to show but not on top, change the z-index to a lower value than the other div

If you don't have access to all the div's z-index settings, either check this post, How can you figure out the highest z-index in your document?, to see how you can try find the highest or simply set your date picker to i.e. z-index: 10000.

UPDATE

And if you want a modal dialog popup div, this is a start for that

Demo: http://codepen.io/anon/pen/BLvcK

jQuery (source: http://jqueryui.com/dialog/#modal)

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>

HTML

<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • how can you specify the z-index to be 20 or 10 without code – Karthick Kumar Feb 25 '14 at 06:45
  • You set it in the CSS in the first place. No need to alter that as the date picker very likely always need to be on top. – Asons Feb 25 '14 at 06:47
  • what will you do if the div have z-index of 1020 and div element of datepicker is 653 , then your code will not work – Karthick Kumar Feb 25 '14 at 06:48
  • Well thats why I wrote that the other div need lower z-index. I do believe the Vishnu understand that based on his question. – Asons Feb 25 '14 at 06:51
  • @KarthickKumarGanesh I don't want it in CSS. I want it in JavaScript . I am using window.open to open the new window. is there any other way to open & make it stay on top. Because I read somewhere we can use the pop div to do that .But not familiar in how to use it. – user3300851 Feb 26 '14 at 04:36
0

Try this code:

newWindow = window.open();

document.addEventListener("click",function() {
  newWindow.focus();
});
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
AhmedAyman95
  • 1
  • 1
-1

You can't force a window to be on top of other windows via JS, nor should you.

user3339662
  • 66
  • 4