Question

我正在使用bootstrap模式弹出来显示项目中附加的音频/视频。单击取消按钮时，模式应关闭，音频应停止播放。这在Chrome中正常工作，但在mozila和IE中我点击取消模式解散，但aduio / video继续播放。

这是模态弹出窗口的HAML代码：

%a{ href: "#", class: "x", title: "Close", :'data-dismiss' => "modal" }
    .diagRepeater &nbsp;

    = swf_tag "StrobeMediaPlayback",
      :width => '620',
      :height => (attachment.media_content_type.split('/')[0] == 'audio' ? '65' : '340'),
      :flashvars => { :urlIncludesFMSApplicationInstance => "true",
      :src => URI.encode("#{request.protocol}#{request.host_with_port}" + attachment.media.url),
      :playButtonOverlay => (attachment.media_content_type.split('/')[0] == 'audio' ? 'false' : 'true'),
      :controlBarAutoHide => (attachment.media_content_type.split('/')[0] == 'audio' ? 'false' : 'true') },
      :parameters => { :allowFullScreen => "true", :wmode => "direct",     :allowScriptAccess => "always" }

这是bootstrap.js文件中的代码：

hide: function (e) {
e && e.preventDefault()

    var that = this
    alert(this.toString());
    e = $.Event('hide')

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    $('body').removeClass('modal-open')

    escape.call(this)

    this.$element.removeClass('in')

    $.support.transition && this.$element.hasClass('fade') ?
      hideWithTransition.call(this) :
      hideModal.call(this)
  }

Answer 1

有一个简单的方法，如果您遇到任何麻烦，只需使用下面的代码并首先清除模态的html并重新放置它，它应该每次都有效：

$('.x').live('click',function(){
    var media_html = '';
    $('.modalBox').each(function(){
         media_html = $(this).html();
         $(this).html('');
         $(this).html(media_html);
    });
});

Answer 2

尝试这样的事情：

$('.x').click(function(){
    var myAudio = document.getElementsByTagName("audio")[0];
    if(myAudio != undefined){
        myAudio.StopPlay();
    }
}

Answer 3

这真的不应该太难。我在想你的javascript存在问题。你有没有像Railscasts那样实现Bootstrap？我对模态和视频一直没有任何问题。

http://railscasts.com/episodes/328-twitter-bootstrap-basics

http://twitter.github.com/bootstrap/

Answer 4

<a href="#" class="mydemo">Open Video</a>
<div id="myModal" class="modal hide" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
    <div class="modal-body"> <iframe width="470" height="310" frameborder="0" allowfullscreen=""></iframe></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<script type="text/javascript">
$('.mydemo').click(function () {
            var src = 

'http://www.youtube.com/v/2EnI9K8Fkf4&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;autoplay=1';
            $('#myModal').modal('show');
            $('#myModal iframe').attr('src', src);
            });

        $('#myModal.modal').bind('hide', function () {
            var iframe = $(this).children('div.modal-body').find('iframe');
            var src = iframe.attr('src');
            iframe.attr('src', '');
            iframe.attr('src', src);
            });

</script>

此代码在IE上运行良好。

关闭模式的Bootstrap模态数据 - 关闭不关闭mozilla和IE中的音频

4 个答案: