2

プロジェクトに添付されているオーディオ/ビデオを表示するために、ブートストラップ モーダル ポップアップを使用しています。キャンセル ボタンをクリックすると、モーダルが閉じ、オーディオの再生が停止します。これは Chrome では正しく機能していますが、mozilla と IE の両方で、クリックするとモーダルが閉じますが、aduio/video は引き続き再生されます。

これは、モーダル ポップアップの HAML コードです。

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

    = 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)
  }
4

4 に答える 4

3

問題が発生した場合は、以下のコードを使用し、最初にモーダルの html をクリアしてから再度配置するだけで、いつでも機能する簡単な方法があります。

$('.x').live('click',function(){
    var media_html = '';
    $('.modalBox').each(function(){
         media_html = $(this).html();
         $(this).html('');
         $(this).html(media_html);
    });
});
于 2013-03-16T08:26:00.930 に答える
1

次のようなことを試してください：

$('.x').click(function(){
    var myAudio = document.getElementsByTagName("audio")[0];
    if(myAudio != undefined){
        myAudio.StopPlay();
    }
}
于 2013-03-09T07:59:06.620 に答える
0

これは本当に難しいことではありません。あなたのjavascriptに問題があると思います。このRailscastsの説明のようにBootstrapを実装しましたか? モーダルとビデオで問題が発生したことはありません。

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

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

于 2013-03-09T12:56:38.027 に答える