时间戳

首页 > 解决方案 > 在引导模式中打开 href

javascript - 在引导模式中打开 href

问题描述

我有多个视频要以模态显示。我不想为每个按钮创建模态来单独显示视频。我想在所有按钮下以单一模式显示所有视频。

我找到了一个功能。它在旧版本的引导程序上运行良好，但是当我更改为引导程序 3.3.7 时，它没有以模态显示视频。

这是我的html。

<a href="https://www.youtube.com/embed/7iPoBjiFdho/" class="btn bootpopup" data-toggle="modal" data-target="#popupModal">Open modal</a>

<div id="popupModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
         <div class="modal-content">
        <div class="modal-body">
            <iframe width="100%" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        </div>
    </div>
</div>

这是js函数。

</script>
     <script type='text/javascript'>

        $(document).ready(function() {

            $('.bootpopup').click(function(){
    var frametarget = $(this).attr('href');
  var targetmodal = $(this).attr('data-target');
  if (targetmodal == undefined) {
    targetmodal = '#popupModal';
  } else { 
    targetmodal = '#'+targetmodal;
  }
  if ($(this).attr('title') != undefined) {
    $(targetmodal+ ' .modal-header h3').html($(this).attr('title'));
    $(targetmodal+' .modal-header').show();
  } else {
     $(targetmodal+' .modal-header h3').html('');
    $(targetmodal+' .modal-header').hide();
  }  
    $(targetmodal).on('show', function () {
        $('iframe').attr("src", frametarget );   
    });
    $(targetmodal).modal({show:true});
  return false;

});

        });

        </script>

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

试试这样，它现在应该可以工作了：

$(document).ready(function() {

   $('.bootpopup').click(function(){
   var frametarget = $(this).attr('href');
   var targetmodal = $(this).attr('data-target');
   if (targetmodal === undefined) {
     targetmodal = '#popupModal';
   }

   if ($(this).attr('title') != undefined) {
     $(targetmodal+ ' .modal-header h3').html($(this).attr('title'));
     $(targetmodal+' .modal-header').show();
   } else {
     $(targetmodal+' .modal-header h3').html('');
     $(targetmodal+' .modal-header').hide();
   }   
   $('iframe').attr("src", frametarget );   

   $(targetmodal).modal({show:true});
   return false;
   });
});

https://jsfiddle.net/7nbj5jjj/

推荐阅读