Load specific external content in bootstrap 3 modal

Is it possible to load external content from a specific div into a Bootstrap 3.3.x Modal?

Here's my setup:

Page 1 = mywebsite.com/doctors, which will open the modal.

Page 2 = mywebsite.com/doctors/john-doe, which has a div named #bio.

Can I load the content from #bio into the modal on Page 1?

I've found info on loading a full external page into the modal, but I really need to load only the content from a specific div.

I pieced together this bit of ajax for loading a specific element, but I'm not sure how to integrate it with the bootstrap modal (or if it's even the best way to do this).

$.ajax({
    url: 'mywebsite.com/doctors/john-doe',
    dataType: 'html',
    success: function(html) {
        var div = $('#bio', $(html)).addClass('done');
        $('.modal-content').html(div);
    }
});

Thanks for any help.