bootstrap-modal - 使 Bootstrap Modal 相对于窗口动态调整大小并每次加载不同的内容

Question

我需要能够根据单击的链接将不同的远程内容加载到 Bootstrap Modal 覆盖中。

我还需要它动态调整大小以使用窗口的大部分高度和大约三分之二的宽度。

最后，我把从几个地方收集到的点点滴滴拼凑在一起，并进行了一些自己的摆弄，最终到达了那里。

我无法在一个连贯的地方找到这个问题的答案，所以我发布了这个问题和我自己的答案，以防它帮助别人。

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>