Modal close definition

Bootstrap Studio Help
1

I created a modal popup with 4 checkboxes and the 2 generic buttons. My intention is to be able to multi-select 0-4 of these checkboxes. Characteristic of the basic modal is to get closed by the first click. In consequence, I have to open the modal 4 times to have all 4 checkboxes modified. Is there any possibility to only close the modal by clicking one of the 2 buttons (close/save)? Why the popup is closed by the checkboxes?

Thank you for any help!!

Best regards
Steffen

2

A standard modal will not close unless the close button, the ‘x’ or outside of the modal are clicked. Have you modified any code at all, maybe you have a stretched-link class added to a button?

Example of standard modal with form:

https://modal-checkbox.bss.design/

3

Not sure about the difference… just deleted the modal-form and created a new one w/o any code modification it closes wherever I click. I do not open it via button but linked the button role to a div:

<div data-bs-toggle="modal" href="#modal-speaker" role="button">
                                <div class="row" style="height: 50px;">
                                    <div class="col" style="height: 50px;"><img style="width: 40px;height: 38px;margin: 0px;margin-top: 19px;margin-left: -5px;margin-right: 0px;padding-top: 0px;" src="assets/img/Logo-Speakers.png"></div>
                                </div>
                                <div class="row" style="height: 50px;">
                                    <div class="col" style="height: 50px;margin-top: 0px;"><label class="col-form-label" style="color: var(--swiper-theme-color);font-family: 'ADLaM Display', serif;font-size: 15px;text-align: center;padding-top: 10px;height: 50px;">Speaker</label></div>
                                </div>
                                <div class="modal fade" role="dialog" tabindex="-1" id="modal-speaker">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Modal Title</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>The content of your modal.</p>
                                            </div>
                                            <div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Save</button></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

In this example I did not add checkboxes. But as the modal-window closes on every click, it must be something wrong with the fundamental structure.

Thanks for your help!!

4

You have the modal inside the toggle. Move the modal outside the div with the attribute data-bs-toggle="modal"

5

Argh… Thank you very much!!
No it behaves correct!

Best regards
Steffen

1 Like