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

Question

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

Depend on what function you call on button b and how you write the click trigger function what to do — BoBiTza, Jan 28 '22 at 08:57
the first button is , and the second button is the same style, but inserted in the first modal body — Cloud VGP, Jan 28 '22 at 09:02
Does this answer your question? [Bootstrap: Open Another Modal in Modal](https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal) — Kiran Joshi, Jan 28 '22 at 09:08
You have $('.modal-body').load(); but have 2 modal with class .body, he don't know where to put content, try $('#modal2') and modal1 and add id foreach div — BoBiTza, Jan 28 '22 at 09:08
i tried your solution @BoBiTza , still not working. can you give me an example — Cloud VGP, Jan 28 '22 at 10:55

score 0 · Answer 1 · answered Jan 28 '22 at 09:39

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>

Nope, still not working. It feels like that clicking on Button B inside the Modal A is not lauching or active — Cloud VGP, Jan 28 '22 at 11:00

BoBiTza · Answer 2 · 2022-01-28T13:51:34.557

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/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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>

Are you sure this code is compatible bootstrap 4.5 because i implmented the code, and instead of having modals open, i get redirected to the data-href link — Cloud VGP, Jan 28 '22 at 13:48
You need to implement like this, your code is not complete, the logic is next: You have an html page, jquery with .click listen a button, but because you have .load() you insert new html block in that page but .click doesn't get update with new button from modal, so you need to recall the function to initialize again .click() to jquery see the button you get in that modal — BoBiTza, Jan 28 '22 at 13:50

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

2 Answers2