How To Change Iframe Html Within A Bootstrap 2 Modal

I have access to change a JS file that is on the same domain as the iframes src but not served within the iframe content itself. I presume i have to wait until the iframe has loade

Solution 1:

With your HTML, you call already the modal. Then You have to add an event when the modal is shown. There, you build the div you want to insert into the iframe.

Finally, when you are in the modal, you search for the iframe, get its content et prepend the content you just built.

$(this).find('iframe').contents().prepend(alert);

HTML reworked :

<div id="ajax-rewards-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="h3RewardsTitle" aria-hidden="false" style="display: block;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="h3RewardsTitle">donut</h3>
    </div>
    <div class="modal-body">
        <div id="divgiveafew">
            <iframe src="https://fortawesome.github.io/Font-Awesome/"></iframe>
        </div>
    </div>
</div>

<!-- Button to open the modal -->
<a href="#ajax-rewards-modal" role="button" class="btn btn-info" data-toggle="modal">Open modal</a>

And the JS :

$(document).ready(function () {

    $('#ajax-rewards-modal').on('shown', function () {

        var alert = $('<div>', {'class' : 'alert alert-info', 'css' : {'padding' : '8px'}});
        $('<p>', {'css' : {'margin' : 0}, 'text' : 'Some Text'}).appendTo(alert);
        var ul = $('<ul>', {'class' : 'unstyled inline'}).appendTo(alert);
        $('<li>', {'text' : '#courageous'}).appendTo(ul);
        $('<li>', {'text' : '#innovative'}).appendTo(ul);
        $('<li>', {'text' : '#passionate'}).appendTo(ul);
        $('<li>', {'text' : '#adaptable'}).appendTo(ul);
        $('<li>', {'text' : '#honest'}).appendTo(ul);
        $('<li>', {'text' : '#thinkbig'}).appendTo(ul);

        $(this).find('iframe').contents().prepend(alert);
    });
});