버튼 클릭시 부트 스트랩 모달은 모달 창의 전체를 다시로드해야합니다.

Question

버튼 (여기 스팬)을 클릭하면 모달 창을 완전히 다시로드해야합니다. 지금 클릭은 모달 창을 열고 모달 창을 닫는 것입니다.

이 코드를 사용하면 :

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

모달 창을 다시 여는 중이지만 전체를 다시로드해야합니다.

이제 rigth가 있습니다.

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>
   

Answer 1

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

또한 여기에서 더 많은 정보를 찾을 수 있습니다.

프로그래밍 방식으로 호출 할 때 모달에 매개 변수를 전달하는 방법은 무엇입니까?