带有引导程序 4 的模式未在本地主机上显示，来自 codepen.io 的代码

Posted 2023-03-05

【中文标题】带有引导程序 4 的模式未在本地主机上显示，来自 codepen.io 的代码

【英文标题】：modal with bootstrap 4 not showing at localhost, code from codepen.io

【发布时间】：2018-04-10 22:32:17

【问题描述】：

我刚刚从code网站尝试了带有引导程序 4 的模态

    <div class="container">
    <h1>Play YouTube or Vimeo Videos in Bootstrap 4 Modal</h1>


 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/Jfrjeg26Cwk" data-target="#myModal">
  Play Video 1
</button>

   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/IP7uGKgJL8U" data-target="#myModal">
  Play Video 2
</button>


   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/A-twOC3W558" data-target="#myModal">
  Play Video 3
</button>


     <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://player.vimeo.com/video/58385453?badge=0" data-target="#myModal">
  Play Vimeo Video
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">


      <div class="modal-body">

       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>        
        <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always">></iframe>
</div>


      </div>

    </div>
  </div>
</div> 



</div>

css代码：

body margin:2rem;

.modal-dialog 
      max-width: 800px;
      margin: 30px auto;
  



.modal-body 
  position:relative;
  padding:0px;

.close 
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;

javascript：

$(document).ready(function() 

// Gets the video src from the data-src on each button
var $videoSrc;  
$('.video-btn').click(function() 
    $videoSrc = $(this).data( "src" );
);
console.log($videoSrc);



// when the modal is opened autoplay it  
$('#myModal').on('shown.bs.modal', function (e) 

// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
$("#video").attr('src',$videoSrc + "?rel=0&showinfo=0&modestbranding=1&autoplay=1" ); 
)


// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function (e) 
    // a poor man's stop video
    $("#video").attr('src',$videoSrc); 
) 






// document ready  
);

但是在我在 localhost 中尝试的代码之后，模式没有出现。谁能为我的问题提供解决方案？之前谢谢你。

注意：代码没什么变化。

这里我包含了我在 localhost 上使用的 css 和 javascript：

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js

【问题讨论】：

开发者控制台有错误吗？

你的机器是否连接到互联网

【参考方案1】：

Bootstrap 4 也依赖于 Popper.js，所以如果你不包含它，你将无法使用 Bootstrap 4 https://cdnjs.com/libraries/popper.js