The Bootstrap modal dialog box does not appear in the jsRender script template


I'm trying to use Bootstrap with jsRender. For the most part my data is being displayed correctly. I'm just having trouble displaying the data inside a Bootstrap modal dialog.

I have the following code.

<script id="progDetailsTemplate" type="text/x-jsrender">

        <!-- NOTES MODAL -->
        <div id="notesModal" class="modal  fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header tw-modal-header">
            <button type="button" class="close tw-close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Notes...</h3>
            <div class="modal-body tw-modal-body">
                {{for Notes}}
                    <strong>{{>CreatedDate}} ({{>FirstName}} {{>LastName}})</strong><br />
            <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div><!-- END NOTES MODAL -->

    <table id="programmeDetails" class="table table-bordered table-condensed">


The modal dialog should work without any JS which I have tested and it does, however this is only when the modal div is outside the script tag.

Any ideas on how I can make the dialog appear inside the jsRender script tag?

It's OK I decided the only way to get around this was to ditch Bootstrap. I am using just jQueryUI for the dialog I need. It's a shame the Bootstrap modal dialog won't work.