4

Twitterでは、Bootstrapは、Webサイトに表示される箱から出してすぐに使用できるモーダルダイアログを表示する可能性があります。しかし、私はこれを、多くのiframeを使用する既存のWebアプリケーションで使用しています。問題は; iframe内でTBモーダルを開くと、そのiframe内の中央に表示されます。現在開いているページにモーダルで表示したいと思います。モーダル背景/シャドウ付き。しかし、どのように..？「window.parent.parent.document。*」を試しましたが、内容が表示されません。 例

4

2 に答える 2

4

モーダルを挿入/更新するためにヘルパーメソッドを使用します。iframeシナリオで機能します。

iframeの場合：

$(function() {
  window.parent.renderModal(".my-modal-class", "My modal content");
});

renderModalは、親ページスコープで使用可能である必要があります。そのためのコードは次のとおりです。

function renderModal(selector, html, options) {
  var parent = "body",
      $this = $(parent).find(selector);

  options = options || {};
  options.width = options.width || 'auto';

  if ($this.length == 0) {
    var selectorArr = selector.split(".");
    var $wrapper = $('<div class="modal hide fade ' + selectorArr[selectorArr.length-1] + '"></div>').append(html);
    $this = $wrapper.appendTo(parent);
    $this.modal();
  } else {
    $this.html(html).modal("show");
  }

  $this.css({
    width: options.width,
    'margin-left': function () {
      return -($(this).width() / 2);
    }
  });
}
于 2012-10-19T08:04:52.697 に答える
1

jquery を使用している場合は、もう少し明確になります。

あなたのiframeページに（ボタンがあります）

  $('#tasks-modal').click(function(){
        window.parent.renderModal('#taskModal');
  });

モデルIDを渡す場所。注: モーダル コードは、呼び出し先のトップ フレームにロードする必要があります。

次に、そのトップフレームに次のものがあります。

function renderModal(selector) {
      $(selector).modal('show');
}

よく働く.....

于 2015-07-07T12:11:35.473 に答える