模态框“隐藏”在灰色区域后面答案

【问题标题】：Modal box "hidden" behind greyed out area模态框“隐藏”在灰色区域后面
【发布时间】：2013-07-09 03:46:20
【问题描述】：

我正在关注http://multiplethreads.wordpress.com/tag/pagedown/ 上面链接中的示例使用了 twitter 引导程序，而我使用了 zurb 基础。基本上，我试图获得一个自定义对话框来从我的 pagedown 编辑器中插入图像（有点像 stackoverflow 的做法）。

我可以拉起模态框（基础显示），但它似乎在“背后”某些东西，我似乎无法与之交互。有什么想法吗？

我的代码： js文件：

PH.ui.markdown = {
  initialize: function () {
    var markdownTextArea = $('textarea[data-markdown=true]');
    if (markdownTextArea.length == 1) {
      markdownTextArea.addClass('wmd-input')
        .wrap("<div class='wmd-panel' />")
        .before("<div id='wmd-button-bar'></div>")
        .after("<div id='wmd-preview' class='wmd-preview'></div>"); 
      var converter = Markdown.getSanitizingConverter();
      var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function (callback) {     
      //setTimeout(function () {
      $('#myModal').foundation('reveal', 'open');
     // }, 5000);
     return true; // tell the editor that we'll take care of getting the image url
    });
      editor.run();
    }
  }
};

html:

  <div id="myModal" class="reveal-modal">
                      <h2>Upload Image</h2>    
                           <%= f.file_field :image %>
                      <button class="btn" id="insert_image_post">Insert Image</button>
                     <!--  <a class="close-reveal-modal">&#215;</a> -->
  </div>

【问题讨论】：

我看不到您的代码（例如 css、视图等），请显示您的代码而不是屏幕截图。
你几乎肯定有z-index CSS 问题。
嗨，我很快就发布了这个问题（是第一次迭代 :-D - 我更新了它。让我知道你的想法。
@muistooshort 你是对的。谢谢。
不客气，现在您知道 z-index 问题是什么样子了 :)

标签： ruby-on-rails modal-dialog zurb-foundation pagedown

【解决方案1】：

我想通了。

wmd-prompt-background 的 z-index 为 1000：

<div class="wmd-prompt-background" style="position: absolute; top: 0px; z-index: 1000; opacity: 0.5; height: 1085px; left: 0px; width: 100%;"></div>

所以我刚刚补充了：

<style type="text/css">
#myModal {
  z-index: 1500;
}
</style>

到我的页面，它成功了。

【讨论】：

【解决方案2】：

一种方法是将模态框的 div 直接放在 <body> 下方。这样可以确保模态不是带有特殊 z-index 的元素的一部分

【讨论】：