我试图让 Bootstrap 模式通过 ajax 加载一些创建模式的 html。该 html 中将包含 jPlayer。
无论我如何尝试,我绝对无法让按钮在模式中用于音频。
这是我加载模式的方式:
$(document).ready(function() {
$(".createmodal").click(function(){
$('<div class="modal hide fade"> ..modal html.. </div>').modal();
});
});
这是 jsfiddle 中的示例——我跳过了 ajax,直接将 html 加载到模态创建中。
我尝试过使用 jquery 的 .load 方法。
JSFiddle:http://jsfiddle.net/R5UDn/
编辑:我尝试将 jplayer 初始化放入模态代码中...如果我使用自动播放,则会触发音频,但控件不起作用。
最佳答案
我在 Plunker 中将您的代码重新编写为 AJAX 调用,它似乎对我有用(Chrome、FF):
Plunker
我做到了,因此页面正文现在直接包含模态并将 html AJAX 响应 (modal-jplayer.html) 加载到 .modal-body
中通过 data-remote
属性。用于激活 jPlayer 的脚本已附加到 modal-jplayer.html。
HTML
<a class="btn" data-target="#myModal" data-remote="modal-jplayer.html" data-toggle="modal">Launch Modal</a>
<div id="myModal" class="modal hide fade">
<div class="modal-container step-1">
<div class="modal-header icon">
<button type="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h4></h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
modal-jplayer.html
<div id="jquery_jplayer_1"class="jp-jplayer"></div>
<div id="jp_container_1"class="jp-audio">
...
</div>
<script>
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3, oga"
});
</script>
我真的不知道这与您实际开发代码中的内容相比如何 - 我只是按照我可能做的方式做了它。
否则,可能导致问题的原因可能是 Modal 插件使用的自动对焦。可以非常简单地禁用它:
$('body').on('shown','.modal', function() {
$(document).off('focusin.modal')
});
但就像我说的,到目前为止,它在 Plunker 演示中适用于我,而无需使用此解决方法。
<小时/>只是对 future 帖子的建议:如果您正在使用 AJAX,那么请花时间在 JSFiddle 或 Plunker 或您喜欢的任何内容中准备一个类似的 AJAX 示例。 JSFiddle supports AJAX via GitHub Gists 。就我个人而言,我更喜欢 Plunker 来处理任何 AJAX,因为它直接在应用程序中支持多个文件。
关于javascript - jPlayer + Bootstrap Modal - DOM 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13145480/