Question

我正在尝试使用动态加载的内容制作模态。这是我的JavaScript代码：

function track(id,title) {
    $('#listenTrack').modal('show');
    $('#listenTrack').find('.modal-title').html(title);
    $.get("remote.html", function(data) {

        $('#listenTrack').find('.modal-body').html(data);

    });
}

这是remote.html

<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<script type="text/javascript">var zippywww="26";var zippyfile="9k9lOOtw";var zippytext="#C9302C";var zippyback="#161617";var zippyplay="#ff6600";var zippywidth=320;var zippyauto=false;var zippyvol=80;var zippywave = "#C9302C";var zippyborder = "#cccccc";</script>
<script type="text/javascript" src="https://api.zippyshare.com/api/embed_new.js"></script>
</html>

我也试过没有html标签，但没有。显示文字内容，而不是播放器。如果我直接从浏览器打开remote.html，一切都很好。也许我的代码错了。

Answer 1

正如我在您的解决方案中看到的，我可以注意到您没有加载 boostrap.js 文件，除非这段代码不是您的整体代码段。

这是一个对我有用的简单解决方案：

<!DOCTYPE html>
<html>
<head>
    <title>title </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>



<div class="modal fade" id="modal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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 -->

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<script>
(function(){
    // 1 :the content that we want to inject inside our modal 
    //  this content can be loaded from another external file, this is just an example 
    var content = {title:"this is the title ",body:"this is the body content"};

    // reference my modal 
    var modal1=$('#modal1');
    $(modal1).find('.modal-title').html(content.title);
    $(modal1).find('.modal-body').html(content.body);

    // show the modal 
    $(modal1).modal();


})();   

</script>
</body>
</html>

此示例中使用的模式来自bootstrap官方网站：http://getbootstrap.com/javascript/#modals

不要忘记加载第一个jquery ，因为bootstrap依赖于它，第二次加载bootstrap.js而不忘记头部中的bootstrap.css。

Answer 2

这是一个高度跨浏览器兼容的解决方案。它使用XMLHttpRequest对象的open方法打开你的＆＃34; remote.html＆＃34;使用HTTP GET方法的文件。第三个参数 true 是将请求标记为异步。

加载时没有错误（使用HTTP OK响应），请使用＆＃34; remote.html＆＃34;的HTML内容填充 listenTrack div。

var xhr= new XMLHttpRequest();
xhr.open('GET', 'remote.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return;
    document.getElementById('listenTrack').innerHTML= this.responseText;
};
xhr.send();

我再说一遍，这是高度交叉兼容的（除了IE的旧版本，现在已经没有了），甚至不需要jQuery或任何其他JavaScript库。

将HTML文件加载到Bootstrap模式中

2 个答案: