modal mit Bootstrap-4 nicht auf localhost zeigt, Code aus codepen.io

Question

i gerade versucht modal mit Bootstrap-4 von der Website code

<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-Code:

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 
}); 

aber nach dem Code versuche ich in localhost das Modal nicht angezeigt. Kann mir jemand eine Lösung für mein Problem bieten? danke dir vorher.

hinweis: der code ist nichts ich ändere ein bisschen.

hier schließe ich CSS und JavaScript, die ich auf localhost verwenden:

• 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

Answer 1

Bootstrap 4 hängen von Popper.js auch, also, wenn Sie don Wenn Sie es nicht verwenden, können Sie Bootstrap 4 https://cdnjs.com/libraries/popper.js

nicht verwenden