1

現在、modal.js の version3.3.6 を利用して、モーダル表示を行うページを作っています。
この画面にはボタンがあり、ボタンをクリックするとモーダルウィンドウが表示されます。
モーダルの中には<p>で包んだ文字列があり、知りたいのはこの要素の高さの取得法です。

現状、クリックイベントで

takasa = $("p").height();

のように取得しようとすると0が返ってきます。
モーダルは最初display:noneになっているため、要素が見つからず
高さが0になっているのかと思います。

今回の流れは

  1. ボタンクリック
  2. モーダルウィンドウとなる領域にmodal-openのクラスが付与
  3. 同時に付与された領域はdisplay:blockとなる
  4. モーダル内の<p>要素が存在することとなり高さが生まれる

clickイベントでは、1と2の間でロジックが走っていると思うので
4以降でロジックを走らせることができれば、おそらく高さの取得ができると
思うのですが、このやり方がさっぱりわかりません・・・

3 件の回答 3

1

回答の内容は@pgrho さんと同じですが、サンプルを投稿します。
(コメントとして追加しようとしましたが、まだ権限が足りなかったため回答として投稿)

$('#myModal').on('shown.bs.modal', function (e) {
  var takasa = $('p').height()
  alert(takasa);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>
        content
        </p>
      </div>
    </div>
  </div>
</div>

2
  • コメントとして投稿したら、分かりにくくなるので… $('#myModal').on('shown.bs.modal', function (e) { var takasa = $('p').height() alert(takasa); }); 見にくいと思います
    – ra1ned
    Commented 2016年12月1日 9:28
  • 返信が遅くなり申し訳ありません。 こちらのサンプルに肉付けしていく形でうまく動作しました。 しかし結果的に@pgrhoさんに最初にご提示いただいたやり方と同じ手段になってしまいましたが、 何故最初失敗してしまったかは最後までわからず仕舞いとなってしまいました・・・
    – user17063
    Commented 2016年12月5日 6:07
0

shown.bs.modalイベントを使用すればよいと思います。

$('#myModal').on('shown.bs.modal', function() {
    // takasa = $("p").height();
});
2
  • ご回答ありがとうございます。 こちらの処理にアラートを仕込んで試してみたところ、 何も起こらず、残念ながら解決には至りませんでした。
    – user17063
    Commented 2016年12月1日 2:14
  • 2
    @user17063 セレクターが一致していないだけなのではないかと思います。回答で'#myModal'となっている部分は実際に指定されているid/classに変更してください。モーダルがページ内に1個だけなら.modalでよいです。
    – pgrho
    Commented 2016年12月1日 5:15
0

modal.jsそのものがあまり知らないので違っていたらごめんなさい。
下記source を見る限り、modalmanagerのgetOpenModalsで拾えそうな気がしますがいかがでしょう?

https://github.com/jschr/bootstrap-modal

1
  • それはBootstrapのmodalを拡張したライブラリのようですが、質問者さんが使っておられるのはBootstrap3.3.6標準のものかと。で、標準の方にはModalManagerはないです。
    – unarist
    Commented 2016年12月1日 14:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。