单击按钮时的引导模态需要完全重新加载模态窗口

问题描述

我需要在单击按钮时完全重新加载模式窗口（在这里跨度） 现在单击是打开模式窗口和关闭模式窗口。

如果我使用此代码：

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

这只是重新打开模式窗口，但我需要完全重新加载。

我现在很严格：

1. 我按下按钮。
2. 显示的模态一切正常。
3. 我按下按钮
4. 隐藏的模式。
5. 我按下按钮。
6. 模式打开并再次加载ajax并正常工作。

我需要 删除4.和5。：

1. 我按下按钮。

2. 模态显示一切正常。

3. 我按下按钮

4. 模式重新打开并重新加载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>
   

解决方法

看起来您需要一个自定义触发器并以编程方式进行 因为默认的BS数据切换触发器具有另一种逻辑

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

更多信息，请点击此处

How to pass parameters to modal when i call it programmatically?