gpt4 book ai didi

javascript - 将 HTML 文件加载到 Bootstrap Modal

转载 作者:行者123 更新时间:2023-11-30 12:18:57 25 4
gpt4 key购买 nike

我正在尝试制作一个包含动态加载内容的模式。这是我的 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 一切都很好。也许我的代码有误。

最佳答案

正如我在您的解决方案中看到的那样,我注意到您没有加载您的 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');
// use `.html(content)` or `.text(content)` if you want to the html content
// or text content respectively.
$(modal1).find('.modal-title').html(content.title);
$(modal1).find('.modal-body').html(content.body);

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


})();

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

本例中使用的modal来自bootstrap官网:http://getbootstrap.com/javascript/#modals

不要忘记先加载jquery,因为bootstrap 依赖于它。其次加载你的 bootstrap.js 而不要忘记 head 部分 中的 bootstrap.css

关于javascript - 将 HTML 文件加载到 Bootstrap Modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31629281/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com