html - Bootstrap 3.0模式代码在一个单独的文件中

Question

我有一个共同的模式，可以从不同的地方以不同的形式调用。我试图在一个单独的文件中为它编写一个公共代码并调用它。如果modal的代码与调用它的按钮包含在同一个文件中，那么它可以正常工作。但如果我将模式表单的代码放在单独的文件中，它不会打开模式表单。
下面是调用模式窗体的按钮的代码：

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

下面是另一个HTML文件“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

为什么这么难？在主文件中使用：

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

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