Bootstrap jquery скрытое и модальное свойство show.bs.modal не работает - PullRequest
Новая
       26

Bootstrap jquery скрытое и модальное свойство show.bs.modal не работает

0 голосов
/ 05 февраля 2019

У меня есть бутстрап модальный.Я хочу получить операцию, когда модал включен и выключен.Но мой код скрипта не работает при открытии и закрытии модального окна.

То, что я хочу сделать, это видео в модальном режиме.Если модальный режим выключен, остановите воспроизведение видео.Если модальный режим включен, начните воспроизведение видео.

Bootstrap версия 3.3.7, jquery версия 3.2.1.Методы hidden.bs.modal и show.bs.modal здесь не работают. 

<script>         

    // Test - shown.bs.modal
    $("#arcaVideoModal").on("shown.bs.modal", function () {
        alert('Work shown');
    });

     // Test - hidden.bs.modal
    $("#arcaVideoModal").on("hidden.bs.modal", function () {
        alert('Work hidden');
    });

</script>






// My application code 
<!-- Modal -->
    <div class="modal fancybox-show-caption" id="arcaVideoModal" data-toggle="modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <div class="embed-responsive embed-responsive-16by9">
                        <video id="video1" width="320" height="240" controls>
                            <source src="/Documents/arca-cm18.mp4" type="video/mp4">
                        </video>
                    </div>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
            </div>
        </div>
    </div>



    <script>
    $(document).ready(function () {

        //Video play
        $("#btn_play").on("click", function () {

            alert("video play");

            var video = $('#video1')[0];
            video.play();
        });


        //video stop
        $("#arcaVideoModal").on('hidden.bs.modal', function () {

            alert("hidden video play");

            var video = $('#video1')[0];
            video.pause();
        });
    });

</script>

Почему здесь не работают метод hidden.bs.modal и show.bs.modal?Как мне делать вещи в модальном режиме, когда модальное открывается и закрывается в модальном

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Я нашел ответ на этот вопрос.Я поделюсь решением ниже для моих друзей, которым они могут понадобиться после меня. Хорошее кодирование для всех. Большое спасибо.

 <script>
    $(document).ready(function () {

        //Video play
        $("#btn_play").on("click", function () {
            var video = $('#video1')[0];
            video.play();
        });
    });

</script>

<script>
    $(document).on('hidden.bs.modal', function () {
        var video = $('#video1')[0];
        video.pause();
    });
</script>

Функция воспроизведения и паузы должна запускаться для записи в отдельные теги сценария.Это решение моей проблемы.Там могут быть разные методы решения.Мы любим разные идеи:)

0 голосов
/ 05 февраля 2019

Вам нужно прослушать окно, чтобы событие сработало.Затем проверьте target события, чтобы увидеть, является ли это модальным для вашего модала.Когда идентификатор модального объекта совпадает с идентификатором, который вы хотите выполнить, вы делаете свое дело. 

$(window).on("shown.bs.modal", function(e) {
   var modal = e.target;
   var $modal = $(modal);
   if($modal.attr('id') == 'arcaVideoModal') {
      do your stuff
   }
});

Я также предлагаю вместо спам-оповещений нажимать на кнопку, которую вы используете * 1005.* и следите за своей консолью разработчика.

...