I have a problem opening a modal from inside another modal. I am using Boostrap 4.5 My html code

<div id="PopUPModal"  role="dialog"> 
                    <div > 
                        <div > 
                            <div ><button type="button"  data-dismiss="modal">&times;</button> </div>
                            <div > </div>
                            <div >
                                <button type="button"  data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="PopUPModalImage"  role="dialog"> 
                    <div > 
                        <div > 
                            <div ><button type="button"  data-dismiss="modal">&times;</button> </div>
                            <div > </div>
                            <div >
                                <button type="button"  data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>

i have javascript in footer to open each modal

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

My modals (A and B) are opening fine when i call them seperately. 2 different buttons on my page, one for A and one for B

But once i move B button and put it inside the A modal, A opens fine but no way i can make B button works

Any help with this issue ? thx

CodePudding user response：

replace your code with this:

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

CodePudding user response：

Here is the example, you Open first modal with first button, then you have a second button what open second modal and first modal will close, of course you need to setup on that buttons href because you use $(this).attr('data-href'):

The 2nd thing if you load with .load() from url you need to reinitialize $('#openPopupModalImage').on('click') trigger because your dome changed and need to view handler again on the button you get from .load(content) so $('#openPopupModalImage').on('click') need to create a function with that event handler function BtnSecRend() { $('#openPopupModalImage').off().on('click'...... } and when you press button on first modal you call BtnSecRend() again

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"  data-href="https://www.google.com/">Open first modal</button>
    <div id="PopUPModal"  role="dialog"> 
        <div > 
            <div > 
                <div ><button type="button"  data-dismiss="modal">&times;</button> </div>
                <div >
                    <button type="button" id="openPopupModalImage" data-href="https://www.youtube.com/" >Open second modal</button>
                </div>
                <div >
                    <button type="button"  data-bs-dismiss="modal"="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="PopUPModalImage"  role="dialog"> 
        <div > 
            <div > 
                <div ><button type="button"  data-dismiss="modal">&times;</button> </div>
                <div > </div>
                <div >
                    <button type="button"  data-bs-dismiss="modal"="modal">Close</button>
                </div>
            </div>
        </div>
    </div>