Bootstrap 3.0 modal code in a separate file

Question

I have a common modal that will be called from different places in different forms. I am trying to write common code for it in a separate file and call it. If the code for Modal is included in the same file as the button that calls it, it works fine. But if I put the code for the modal form in a separate file, it does not open the modal form.

Here is the button code that calls the modal form:

<a href="modal.html#myModal" class="btn btn-default btn-sm" data-toggle="modal">Edit</a>

Here is the modal form code in another HTML file, "Modal.html":

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Club Search Result</h4>
            </div>
            <div class="modal-body">
                <p id="dispMsg">   </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Search Again</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  

Answer 1

Why is it so hard? Use this in your main file:

<a href="modal.html#myModal" class="btn btn-default btn-sm" data-toggle="modal">Edit</a>

<?php include('/Modal.html'); ?>