bootstrap-modal - Bootstrap Modal をウィンドウに合わせて動的にサイズ変更し、毎回異なるコンテンツをロードする

Question

クリックされたリンクに応じて、さまざまなリモート コンテンツを Bootstrap Modal オーバーレイにロードできるようにする必要がありました。

また、ウィンドウの高さのほとんどと幅の約 3 分の 2 を使用するように動的にサイズ変更する必要がありました。

最終的には、いくつかの場所から集めた小片を自分で少しいじって組み合わせることで、そこにたどり着きました。

一貫した場所でこれに対する答えを見つけることができなかったので、他の人に役立つ場合に備えて、質問と自分の答えを投稿しています。

Answer 1

私の評判はまだそれほど高くないので、この回答を投稿するのに8時間待たなければなりませんでしたが、これが私にとってうまくいった理由です...

<a href="https://www.somewebsite.com/1/" class="myModalTrigger" onclick="return false">Preview 1</a>
<a href="https://www.somewebsite.com/2/" class="myModalTrigger" onclick="return false">Preview 2</a>
<a href="https://www.somewebsite.com/3/" class="myModalTrigger" onclick="return false">Preview 3</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Modal Heading</h3>
  </div>
  <div class="modal-body"></div>
</div>

<style>
    body .modal {
        width: 65%;
        margin-left: -32%;
    }
    .modal-header {
        padding: 3px 15px 0 15px;
    }
    .modal-body {
        max-height: none;
    }
</style>

<script>
    $(".myModalTrigger").click(function() {
        var height = $(window).height() - 150;
        $(".modal-body").height(height);
        $("#myModal").css({top: 50 });
        $("#myModal").removeData("modal");
        $("#myModal").modal({remote: $(this).attr("href")});
    });
</script>