views:

73

answers:

1

Hi folks,

I have just started using jQuery in the past couple of weeks and am really enjoying it - damn fantastic thing! I have one problem at the moment though. Here's the basic structure of my page:

<body>
  <div id="accordionContainer">
    <div class="accordionSectionHeader">
      Some header label...
    </div>
    <div class="accordionSectionContent">
      Some content...
      <a href="#">Popup dialog</a>
    </div>
  </div>

  <div id="dialog">
    Some dialog content here...
  </div>
</body>

It's a fairly straightforward layout - when you click the "Popup dialog" link the dialog div shows, positioned over the top of the link. So far so good. Now I have struck problem - I have set the dialog modal option to "true" but I can still click on stuff underneath, including accordion section headers! Have I missed something here? Can't for the life of me figure out what's going wrong since I'm very much a newbie here.

Any suggestions or assistance would be greatly appreciated.

Many thanks, Dany.

+1  A: 

First impressions:

Use firebug to check whether there is a div being drawn to the screen ( etc) somewhere in the code, as the way jQuery likes to block interaction underneath a modal is by blocking you with a screen sized empty div.

Also check the Z-Index property of your elements to make sure the accordion menu isn't sitting ontop of that blocker.

Will head back once there is some form of code :)

EDIT

Your code that you posted through is missing the JQuery UI css file. The css file that downloads with the UI js files controls the formatting of UI elements.

You may not want the whole file, because it will affect every jquery UI widget you use, but the important line you do need is:

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
jamie-wilson
The code is not live yet but will put up the javascript tomorrow...after I look closer on firebug :o)
DanyW
Here's the link: http://wikisend.com/download/451934/Default2.zipIt seems to create the overlay just fine, even has a high z-index of 10000, with the dialog on 10001, but the accordion still appears to be between the overlay and the dialog!
DanyW
D'oh! Thanks so much for that! I added those styles in the wrong css file - not the one referenced in the HTML file! Thanks again...
DanyW