无法在同一页面上有多个 bootstrap 模式

Question

我完全被难住了。我有单独的触发器都非常相似

<a style="margin: 4px 4px 4px 4px !important" 
   data-toggle="modal" 
   data-target="#video_modal" 
   data-title="YouTube video title" 
   data-youtube-url="YouTube/url/">Montenegro protesters decry opposition's use of Serbian symbols
</a>

<a style="margin: 4px 4px 4px 4px !important" 
   data-toggle="modal" 
   data-target="#audio_modal" 
   data-title="Soundcloud item title" 
   data-soundcloud-url="soundcloud/url">Katarina Panic: Montenegro elections-The real winners are citizens
</a>

模态如下：

<div class="modal fade bd-example-modal-lg" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item youtube-iframe" src=""></iframe>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="submission-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item soundcloud-iframe" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

以及填充这些模态的 javascript。

//SOUNDCLOUD MODAL SCRIPT
$('#audio_modal').on('show.bs.modal', function (event) {
  var source = $(event.relatedTarget); // Button that triggered the modal
  console.log(source + "Audio Modal JS");
  var title = source.data('title');
  var soundcloudurl = source.data('soundcloud-url'); // Extract info from data-* attributes

  //MODIFY THE SOUNDCLOUD URL TO INCLUDE THE EMBED PART OF THE URL STRING
  var iframeLink = soundcloudurl.replace(soundcloudrurl, 'https://w.soundcloud.com/player/?url=');

  //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
  var modal = $(this);
  modal.find('.modal-title').text(title);
  modal.find('.audio-iframe').attr("src",iframeLink);

})

//YOUTUBE MODAL SCRIPT
$('#video_modal').on('show.bs.modal', function (event) {
  var source= $(event.relatedTarget); // Button that triggered the modal
  console.log(source + "Video Modal JS");
  var title = source.data('title');
  var youtube_url = source.data('youtube-url'); // Extract info from data-* attributes

  //MODIFY THE YOUTUBE URL TO INCLUDE THE EMBED PART OF THE URL STRING
  var iframeLink = youtube_url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, 'www.youtube.com/embed/');

  //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
  var modal = $(this);
  modal.find('.modal-title').text(title);
  modal.find('.youtube-iframe').attr("src",iframeLink);

})

奇怪的是，YouTube modal 出现并填充得非常好。然而，声云模态根本没有被触发。

我很确定我的类和 id 是正确的（因为 YouTube 模式有效）。但是有些事情我只是没有考虑到。有什么建议吗？

Answer 1

我已经在我的本地环境中测试了你的代码，问题出在第二个模态的 id 值上，因为它是 submission-modal 但应该是 audio_modal 如下图所示

还有一个小错字 soundcloudrurl 应该是 soundcloudurl

完整代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <a style="margin: 4px 4px 4px 4px !important" 
   data-toggle="modal" 
   data-target="#video_modal" 
   data-title="YouTube video title" 
   data-youtube-url="YouTube/url/">Montenegro protesters decry opposition's use of Serbian symbols
</a>

<a style="margin: 4px 4px 4px 4px !important" 
   data-toggle="modal" 
   data-target="#audio_modal" 
   data-title="Soundcloud item title" 
   data-soundcloud-url="soundcloud/url">Katarina Panic: Montenegro elections-The real winners are citizens
</a>
   
<div class="modal fade bd-example-modal-lg" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item youtube-iframe" src=""></iframe>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
</div>

<div class="modal fade" id="audio_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item soundcloud-iframe" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  //SOUNDCLOUD MODAL SCRIPT
$('#audio_modal').on('show.bs.modal', function (event) {
  var source = $(event.relatedTarget); // Button that triggered the modal
  console.log(source + "Audio Modal JS");
  var title = source.data('title');
  var soundcloudurl = source.data('soundcloud-url'); // Extract info from data-* attributes

  // //MODIFY THE SOUNDCLOUD URL TO INCLUDE THE EMBED PART OF THE URL STRING
  var iframeLink = soundcloudurl.replace(soundcloudurl, 'https://w.soundcloud.com/player/?url=');

  // //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
  var modal = $(this);
  modal.find('.modal-title').text(title);
  modal.find('.audio-iframe').attr("src",iframeLink);
});

//YOUTUBE MODAL SCRIPT
$('#video_modal').on('show.bs.modal', function (event) {
  var source= $(event.relatedTarget); // Button that triggered the modal
  console.log(source + "Video Modal JS");
  var title = source.data('title');
  var youtube_url = source.data('youtube-url'); // Extract info from data-* attributes

  //MODIFY THE YOUTUBE URL TO INCLUDE THE EMBED PART OF THE URL STRING
  var iframeLink = youtube_url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, 'www.youtube.com/embed/');

  //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
  var modal = $(this);
  modal.find('.modal-title').text(title);
  modal.find('.youtube-iframe').attr("src",iframeLink);

});
</script>
</body>
</html>

谢谢。祝你有个愉快的一天。

Answer 2

您 不需要 在您的页面上完全需要两个单独的 modals。我有 refactored 你的 code 有 one 模态，它适用于多种事物。

您可以将 id 分配给您的 a 元素，并通过检查 attr 来检查哪个元素触发了 modal 并且您可以应用 data 根据那个模式。

理想情况下，更少的代码总是更好地获得动态结果。

实时工作示例：

//SOUNDCLOUD MODAL SCRIPT
$('#myModal').on('show.bs.modal', function(event) {

  var modal = $(this)
  var button = $(event.relatedTarget) // Button that triggered the modal  

  if (button.attr('id') == 'soundcloud') {
    var title = button.data('title');
    var soundcloudurl = button.data('soundcloud-url'); // Extract info from data-* attributes
    //MODIFY THE SOUNDCLOUD URL TO INCLUDE THE EMBED PART OF THE URL STRING
    var iframeLink = soundcloudurl.replace(soundcloudurl, 'https://w.soundcloud.com/player/?url=');

    //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
    modal.find('.modal-title').text(title);
    modal.find('.iframe').attr("src", iframeLink);
  } else {
    var title = button.data('title');
    var youtube_url = button.data('youtube-url'); // Extract info from data-* attributes

    //MODIFY THE YOUTUBE URL TO INCLUDE THE EMBED PART OF THE URL STRING
    var iframeLink = youtube_url.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, 'www.youtube.com/embed/');

    //SET THE TEXT AND THE SRC ATTRIBUTE OF THE MODAL
    modal.find('.modal-title').text(title);
    modal.find('.iframe').attr("src", iframeLink);
  }
})

#youtube {
  background: green;
  cursor: pointer;
}

#soundcloud {
  background: Yellow;
  cursor: pointer;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<a id="youtube" style="margin: 4px 4px 4px 4px !important" data-toggle="modal" data-target="#myModal" data-title="YouTube video title" data-youtube-url="YouTube/url/">Youtube
</a>
<br>
<a id="soundcloud" style="margin: 4px 4px 4px 4px !important" data-toggle="modal" data-target="#myModal" data-title="Soundcloud item title" data-soundcloud-url="soundcloud/url">Sound Cloud
</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel1"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item iframe" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

无法在同一页面上有多个 bootstrap 模式

Unable to have multiple bootstrap modals on the same page

javascript

bootstrap-modal

bootstrap-4