Невозможно иметь несколько модальностей начальной загрузки на одной странице

ProgramBox

Невозможно иметь несколько модальностей начальной загрузки на одной странице

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#javascript #bootstrap-4 #bootstrap-modal

Вопрос:

Я полностью в тупике. У меня есть отдельные триггеры, все очень похожие

 <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">amp;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">amp;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=$1');

  //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/$1');

  //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 появляется и заполняется абсолютно нормально. Однако модал sound-cloud вообще не запускается.

Я почти уверен, что у меня правильные классы и идентификатор (потому что работает режим YouTube). Но есть кое-что, что я просто не принимаю во внимание. Есть предложения?

1. Для просмотра мультимедиа у вас может one быть модальный, как в моем ответе ниже, но для отправки у вас может быть другой, если хотите. Поскольку отправка будет включать некоторые входные данные и прочее, я полагаю — дайте мне знать

Ответ №1:

Вам вообще не нужны две отдельные modals страницы. У меня refactored свой code есть one модальный, который работает для нескольких вещей.

Вы можете назначить id своему a элементу и проверить, какой из них вызвал modal , проверив его attr , и вы можете применить 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=$1');

    //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/$1');

    //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">amp;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>

Ответ №2:

Я протестировал ваш код в своей локальной среде, и проблема заключалась в значении идентификатора второго модального as, которое является модальным для отправки, но должно было быть 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">amp;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">amp;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=$1');

  // //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/$1');

  //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>

Спасибо. Хорошего дня.

1. Почему два modals , которые могут достигать одинаковых результатов с одним модальным и более динамичным. Смотрите мой ответ. Чем меньше кода, тем лучше. Также ваш код не дает результатов, требуемых OP, поскольку есть другая вещь, требующая внимания. Просто для вашей информации 🙂

2. Да, я согласен с этим. Меньше кода, меньше ошибок. Причина, по которой я опубликовал ответ с незначительными изменениями в его / ее коде, заключается в том, что я просто указываю на незначительные ошибки, чтобы человек избежал той же ошибки в будущем.

3. Я согласен, чем меньше кода, тем лучше. Это было только после того, как я провел рефакторинг именно таким образом. Как справиться с наличием двух модальностей. Скажем, один для отправки данных, а другой для просмотра мультимедиа?