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

时间:2014-03-09 14:08:34

标签: html twitter-bootstrap modal-dialog

我有一个共同的模态,可以从不同形式的不同地方调用。我正在尝试在一个单独的文件中为它编写一个公共代码并调用它。如果Modal的代码包含在与调用它的按钮相同的文件中,它可以正常工作。但是,如果我将Modal表单的代码放在一个单独的文件中,它就不会打开Modal表单。

以下是调用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 -->  

1 个答案:

答案 0 :(得分:-3)

为什么这么难?在主文件中使用它:

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

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