Question

我有以下bootstrap模式对话框div。我的Web应用程序中有4个html页面。我想在所有这4个html页面中使用相同的模态对话框。我不想重复代码。我有一个共同的js。实现这个目标的正确方法是什么？

<!-- Modal -->
<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">Modal title</h4>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

感谢。

Answer 1

javascript库JQuery有一个很好的，易于使用的ajax调用包装器。将您的模态放在一个单独的文件中，并从文件系统中$.get。

    $(function(){
        $.get('modal.html',function(html){ 
            $("#modal-placeholder").html(html);
        });
    });

如果这是你对JQuery的唯一使用，你可以使用javascript自己的ajax调用。在我看来，它不是那么容易阅读或理解，但它的工作方式是一样的：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
        if (xhr.status === OK) {
            var modalPlaceholder = document.getElementById("modal-placeholder");
            modalPlaceholder.innerHTML= xhr.responseText;
        }
    }
};

xhr.open('GET', 'modal.html');
xhr.send(null);

跨越html页面的bootstrap模态div

1 个答案: