Bootstrap 按钮点击模态需要完全重新加载模态 window

Question

我需要在点击按钮时完全重新加载模态 window（跨越此处）现在点击打开模态 window 和关闭模态 window.

如果我使用此代码：

$('#youtubeModal').on('hidden.bs.modal', function (event) {
        $('#youtubeModal').modal('toggle')
})

它只是重新打开模式 window，但我需要完全重新加载。

我现在有权利：

我按下按钮。
所有工作正常的模态显示。
我按下按钮
模态隐藏。
我按下按钮。
模式打开并再次加载 ajax 并且工作正常。

我需要 删除 4. 和 5. :

我按下按钮。
所有工作正常的模态显示。
我按下按钮

模态重新打开并重新加载 ajax 并且工作正常。

 <div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-body">
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
 </div>
 <script>
     $('#youtubeModal').on('show.bs.modal', function (event) {
         let button = $(event.relatedTarget) // Button that triggered the modal
         let youtubeUrl = button.data('url') // Extract info from data-* attributes

         $.ajax({
             url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',
             type: 'post',
             data: {youtubeUrl: youtubeUrl},
             success(response) {
                 // Add response in Modal body
                 $('.modal-body').html(response);
                 //$('#exampleModal').html(response);
                 // Display Modal
                 //$('#exampleModal').modal('show');
             }
         });
     });
 </script>

Answer 1

看来您需要自定义触发器并以编程方式执行因为默认的 BS data-toggle 触发器有另一个逻辑

<span id="play-button" class="fa fa-play-circle play-button" data-url="watch?v=ik7ysDGWbcw" onclick="showYoutubeModal(this)">click me</span>


<div class="modal fade" id="youtubeModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
        </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
<script>
var youtubeModal = $('#youtubeModal').modal({'show': false});
youtubeModal.on('show.bs.modal', function (event) {
   let button = $(event.relatedTarget);
    let youtubeUrl = button.data('url');
    
    $.ajax({
        url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',
        type: 'post',
        data: {youtubeUrl: youtubeUrl},
        success(response) {
        // Add response in Modal body
        $('.modal-body').html(response);
        //$('#exampleModal').html(response);
        // Display Modal
        //$('#exampleModal').modal('show');
        }
    });
});

function showYoutubeModal(trigger) {
    // here you can call modal function programmatically
    // depending on your needs
    youtubeModal.modal('show', $(trigger));
}
</script>

您还可以在此处找到更多信息

Bootstrap 按钮点击模态需要完全重新加载模态 window

Bootstrap modal on button click needs full reload of modal window

javascript

ajax

bootstrap-modal

yii2

twitter-bootstrap-3