Make Bootstrap Modal dynamically resize relative to window and load different content each time

Question

I needed to be able to load different remote content into a Bootstrap Modal overlay depending on which link is clicked.

I also needed it to dynamically resize to use most of the window's height and about two thirds of it's width.

I got there in the end by cobbling together bits and pieces I garnered from several places with a bit of my own fiddling about.

I couldn't find the answer to this in one coherent place so I'm posting the question and my own answer in case it helps someone else.

Answer 1

I had to wait 8 hours to post this answer because my reputation is not so hot yet, but this is what made it work for me...

<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>