'Bootstrap 4.5 (and not 4.0) Open Modal from Inside a Modal

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

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

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

jquerybootstrap-modal


Solution 1:[1]

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>

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 payam
Solution 2

Related Questions