1

我跟随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>

在此处输入图像描述

4

2 回答 2

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>

到我的页面，它工作。

于 2013-07-09T05:51:25.393 回答
0

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

于 2014-09-17T20:41:52.220 回答