Bootstrap4.5（而不是4.0）從Modal內部打開Modal

我在從另一個模態中打開模態時遇到問題。我正在使用 Boostrap 4.5 我的 html 代碼

<div id="PopUPModal" class="modal fade" role="dialog"> 
                    <div class="modal-dialog modal-lg"> 
                        <div class="modal-content"> 
                            <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button> </div>
                            <div class="modal-body"> </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="PopUPModalImage" class="modal fade" role="dialog"> 
                    <div class="modal-dialog modal-lg"> 
                        <div class="modal-content"> 
                            <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button> </div>
                            <div class="modal-body"> </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>

我在頁腳中有 javascript 來打開每個模式

<script>
            $(document).ready(function(){
            $('.openPopupModal').on('click',function(){
                var dataURL = $(this).attr('data-href');
                $('.modal-body').load(dataURL,function(){
                    $('#PopUPModal').modal({show:true});
                });
            });
            });
        </script>
        
        <script>
            $(document).ready(function(){
            $('.openPopupModalImage').on('click',function(){
                var dataURL = $(this).attr('data-href');
                $('.modal-body').load(dataURL,function(){
                    $('#PopUPModalImage').modal({show:true});
                });
            });
            });
        </script>

當我分別呼叫它們時，我的模態（A 和 B）打開得很好。我的頁面上有 2 個不同的按鈕，一個用于 A，一個用于 B

但是一旦我移動 B 按鈕并將其放入 A 模式中，A 可以正常打開，但我無法使 B 按鈕作業

對這個問題有任何幫助嗎？謝謝

uj5u.com熱心網友回復：

用這個替換你的代碼：

         <script>
            $(document).ready(function(){
            $('.openPopupModal').on('click',function(){
                var dataURL = $(this).attr('data-href');
                $('#PopUPModal .modal-body').load(dataURL,function(){
                    $('#PopUPModal').modal({show:true});
                });
            });
            });
        </script>
        
        <script>
            $(document).ready(function(){
            $('.openPopupModalImage').on('click',function(){
                var dataURL = $(this).attr('data-href');
                $('#PopUPModalImage .modal-body').load(dataURL,function(){
                    $('#PopUPModalImage').modal({show:true});
                });
            });
            });
        </script>

uj5u.com熱心網友回復：

這是示例，您使用第一個按鈕打開第一個模式，然后您有第二個按鈕，打開的第二個模式和第一個模式將關閉，當然您需要在該按鈕上設定 href 因為您使用$(this).attr('data-href')：

第二件事如果您從 url 加載 .load() ，則需要重新初始化$('#openPopupModalImage').on('click')觸發器，因為您的圓頂已更改并且需要在從 .load(content) 獲得的按鈕上再次查看處理程式，因此$('#openPopupModalImage').on('click')需要使用該事件處理程式創建一個函式function BtnSecRend() { $('#openPopupModalImage').off().on('click'...... } 和當您在第一個模式上按下按鈕時，您再次呼叫 BtnSecRend()

function BtnSecRend() {
    $('#openPopupModalImage').on('click',function(){
        $('#PopUPModal').modal('hide');
        //let dataURL = $(this).attr('data-href');
        //$('#PopUPModalImage .modal-body').load(dataURL,function(){
            $('#PopUPModalImage').modal('show');
        //});
    });
}
$(document).ready(function(){
    $('#openPopupModal').on('click',function(){
        //let dataURL = $(this).attr('data-href');
        //$('#PopUPModal .modal-body').load(dataURL,function(){
            $('#PopUPModal').modal('show');
            BtnSecRend(); // cal when $('#PopUPModal .modal-body').load is uncommented
        //});
    });
    BtnSecRend();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<button id="openPopupModal" class="btn btn-primary" data-href="https://www.google.com/">Open first modal</button>
    <div id="PopUPModal" class="modal fade" role="dialog"> 
        <div class="modal-dialog modal-lg"> 
            <div class="modal-content"> 
                <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button> </div>
                <div class="modal-body">
                    <button type="button" id="openPopupModalImage" data-href="https://www.youtube.com/" class="btn btn-primary">Open second modal</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal"="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="PopUPModalImage" class="modal fade" role="dialog"> 
        <div class="modal-dialog modal-lg"> 
            <div class="modal-content"> 
                <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button> </div>
                <div class="modal-body"> </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal"="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

標籤：

上一篇：給定一個URL，我如何從它接收檔案物件？

下一篇：獲取jQuery陣列中的表行ID和值