1

http://multiplethreads.wordpress.com/tag/pagedown/に従っています。 上記のリンクの例では、twitter ブートストラップを使用していますが、私は zurb ファンデーションを使用しています。基本的に、ページダウン エディターから画像を挿入するためのカスタム ダイアログ ボックスを取得しようとしています (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

これを行う 1 つの方法は、モーダルの div を の直下に配置すること<body>です。このようにして、モーダルが特別な要素の一部ではないことを確認しますz-index

于 2014-09-17T20:41:52.220 に答える