在手风琴中添加 jQuery 模态对话框答案

【问题标题】：Adding jQuery modal dialog in an accordion在手风琴中添加 jQuery 模态对话框
【发布时间】：2010-07-28 03:25:53
【问题描述】：

在过去的几周里我刚刚开始使用 jQuery，我真的很喜欢它——该死的太棒了！我目前有一个问题。这是我页面的基本结构：

<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>

这是一个相当简单的布局 - 当您单击“弹出对话框”链接时，对话框 div 显示，位于链接的顶部。到目前为止，一切都很好。现在我遇到了问题 - 我已将对话框模式选项设置为“true”，但我仍然可以单击下面的内容，包括手风琴部分标题！我在这里错过了什么吗？因为我是这里的新手，所以我一生都无法弄清楚出了什么问题。

任何建议或帮助将不胜感激。

非常感谢，丹妮。

【问题讨论】：

您能发布一个指向您的代码的链接吗？

标签： jquery jquery-ui dialog modal-dialog accordion

【解决方案1】：

第一印象：

使用 firebug 检查代码中某处是否有 div 被绘制到屏幕（等），因为 jQuery 喜欢阻止模态下交互的方式是用屏幕大小的空 div 阻止您。

还要检查元素的 Z-Index 属性，以确保手风琴菜单没有位于该阻止程序的顶部。

一旦有某种形式的代码就会返回:)

编辑

您发布的代码缺少 JQuery UI css 文件。与 UI js 文件一起下载的 css 文件控制 UI 元素的格式。

您可能不需要整个文件，因为它会影响您使用的每个 jquery UI 小部件，但您需要的重要行是：

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

【讨论】：

代码还没有上线，但明天会放上 javascript...在我仔细查看 firebug 后：o)
这是链接：wikisend.com/download/451934/Default2.zip 它似乎可以很好地创建叠加层，甚至具有 10000 的高 z-index，对话框位于 10001，但手风琴似乎仍然在叠加层之间和对话框！
天啊！非常感谢！我在错误的 css 文件中添加了这些样式 - 而不是 HTML 文件中引用的样式！再次感谢...