I'm trying to display a pop up dialog (using a hidden block) inside the overlay when editing a node.

When i click to edit a node, the overlay appears with all the custom fields of a given content type as usual. It is clean and white and everything in the background is darkened out.

So now i have logic in place (using jQUery) that's supposed to change my div's display to 'show' on keyup for a specific field on top of the overlay edit node.

I've tried adding a z-index of over 1000 and still nothing. The drupal overlay is using a z-index of 501 but my custom div still wont display on top of/over it.

This is my CSS for the hidden block:

#block-block-block-26 {
  z-index: 2000 !important;
  position: fixed;
  display: none;
  text-align: center;
  border: 1px solid #333;
  width: 200px;
  height: 80px;
  border-radius: 5px;
  padding: 10px;

This is my function inside jQuery:

 $('#edit-field-pi-estimated-ini-capital-und-0-value').keyup(function() {
        var txtVal = this.value;
        if(txtVal == 0 && txtVal != '') {
          return false;

any idea how to make my div appear over the overlay?


  • unless you have modified it appropriately, due to conflict avoidance, the jQuery in Drupal doesn't allow the $ shortcut. Use 'jQuery' instead. Are you sure your css is targeting the correct block?
    – Geoff
    Jun 27 '14 at 2:36
  • Yea I made sure that the right block is targeted. This is fairly simple to reproduce. Create a new block, slap it on the side region, give it a z-index of 1000, and open a edit page. That'll bring up the overlay. In theory the block should appear on top over the overlay because the block z-index is much higher. Yet it doesn't. It's as if the overlay is a completely different page where the page view elements aren't accessible no longer once it appears.
    – Emir Memic
    Jun 27 '14 at 3:10
  • it works for me. but the block name is different - mine shows a block id="block-block-4" not an equivalent to your "block-block-block-4"
    – Geoff
    Jun 27 '14 at 3:35
  • That is odd. I'm using a custom theme btw. I'll have to test this using the default theme and see if it'll work. The theme is probably where the bottleneck is. Well, thank you for taking a poke at this and confirming that it does actually work.
    – Emir Memic
    Jun 27 '14 at 3:59
  • I was using a custom theme as well... does it show if you remove the display:none? I ask in case it is a JS problem, not a css problem.
    – Geoff
    Jun 27 '14 at 4:06

The code is fine, problem was with jquery version.

  • Never use form field ID's, as they're not static. Use a preprocess or a form_alter to add a class, then target using that class.
    – Beebee
    Aug 3 '15 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.