1

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 != '') {
          $('#block-block-block-26').show();
          return false;
        }
  });

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

Thanks

Improve this question
5
  • 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
    Commented Jun 27, 2014 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
    Commented Jun 27, 2014 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
    Commented Jun 27, 2014 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
    Commented Jun 27, 2014 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
    Commented Jun 27, 2014 at 4:06

1 Answer 1

Reset to default
0

The code is fine, problem was with jquery version.

Improve this answer
1
  • 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
    Commented Aug 3, 2015 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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