.load() is not pulling in content from html file

Question

I have been using the jQuery Docs and I am trying to set up a situation where the content of a modal is filled from a separate html file. All files are on the same domain, same folder. So far, the modal will launch on click, but no content is being pulled in from the html file. I'm using Zurb reveal for modal.

jQuery:

$('.video-btn').click(function (e) {
    e.preventDefault();
    var modalUrl = $(this).attr('href');
    $('#myModal').load('modalUrl #vidModal').reveal({
        animationspeed: 500,
        animation: 'fadeAndPop',
        dismissmodalclass: 'close-reveal-modal'
    });

    //$('.video-wrapper').children().show();
});

The Link

<a href="modal1.html" class="info-btn video-btn">
     <h2>Video</h2>
     <p>Cambridge at a glance</p>
</a>

/*Outer modal hidden on page*/
<div id="myModal" class="reveal-modal"></div>/*Content that is in a file named modal1.html*/
<div id="vidModal" class="reveal-modal">
    <div class="inner-modal">
        <div class="modal-head">
            <h2>Video</h2>
            <p>Cambridge at a glance</p>
            <a class="close-reveal-modal"></a>
        </div>
        <div class="modal-share-btns"></div>
        <div class="video-wrapper">
            <iframe id="vid" src="http://player.vimeo.com/video/20800836?api=1" width="700" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>
    </div>
    <!-- /inner-modal -->
</div>

Answer 1

your code should look like this:

$('#myModal').load(modalUrl+ ' #vidModal')

in your code you load the url modalUrl #vidModal and not the url stored in modalUrl concatenated with #vidModal

(Updated base on comments)

Answer 2

The problem:

$('#myModal').load('modalUrl #vidModal')

modalURl is being included as part of the string literal.

You should do:

$('#myModal').load(modalUrl + ' #vidModal')