

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

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

[code]

    takasa = $("p").height();
    
[/code]

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

今回の流れは

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

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


CC BY-SA 3.0
2016-11-30T10:02:33.497
30794
2016-12-01T13:54:11.513
2016-11-30T10:37:48.867
5750
17063
question
javascript jquery bootstrap
modal内の特定の要素の高さを取得したい


[`shown.bs.modal`イベント](http://getbootstrap.com/javascript/#modals-
events)を使用すればよいと思います。

[code]

    $('#myModal').on('shown.bs.modal', function() {
        // takasa = $("p").height();
    });
    
[/code]


CC BY-SA 3.0
2016-11-30T10:32:55.940
30795
2016-11-30T10:32:55.940
5750
30794
answer


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

[code]

    $('#myModal').on('shown.bs.modal', function (e) {
      var takasa = $('p').height()
      alert(takasa);
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-12-01T04:57:00.937
30807
2016-12-01T04:57:00.937
19759
30794
answer


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

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


CC BY-SA 3.0
2016-12-01T13:54:11.513
30816
2016-12-01T13:54:11.513
19048
30794
answer