Adding jQuery modal dialog in an accordion
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.
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%; }
加载中,请稍侯......
精彩评论