Question

我跟随http://multiplethreads.wordpress.com/tag/pagedown/ 上面链接中的示例使用了twitter bootstrap，而我使用了zurb基础。基本上我试图获得一个自定义对话框来从我的pagedown editior插入图像（有点像stackoverflow如何做）。

我abale拉起模态框（基础揭示），但它似乎是“背后”的东西，我似乎无法与它互动。有什么想法吗？

我的代码： 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>

enter image description here

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

到我的页面并且有效。

Answer 2

一种方法是将模态的div直接放在<body>下。这样，您可以确保模态不是具有特殊z-index

的元素的一部分

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

2 个答案: