bootstrap modal closes when ok on alert() is clicked

Question

Bootstrap modal is closing when I click on "Ok" button showing from "alert()" function.

$("#expample").modal({
    backdrop: 'static',
    keyboard: false,
    show: true
});

Below is my jquery:

$('.sendToUser').on('click', function (){
            var selectedLyrics = $('#selectedLyricsInput').val();
            if($("input[name='selectUserRadio']").is(":checked") == false){
                alert('Please, select a user to send.');
                return;
            }
        });

Although, hitting "Enter" or "Esc" on keyboard is working fine and also, clicking outside the modal; the modal is not closing which is fine.

Below is my html:

<div class="modal fade" id="userSelectionModal" tabindex="-1" role="dialog" aria-labelledby="userSelectionModal">
    <div class="modal-dialog modal-likes" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Select User</h4>
            </div>

            <div class="modal-body">
                <div style="margin-bottom: 50px;" id="populateUsers">

                </div>
                <input type="hidden" id="selectedLyricsInput" value="" />
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-success sendToUser" data-dismiss="modal">Send</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            {{--<i class="fa fa-spinner fa-spin"></i>--}}
        </div>
    </div>
</div>

I am creating an alert popup from an event on the modal but when clicked on the "ok" of the alert() popup, it disappears.

How to prevent closing of the modal after clicking on "OK" on the alert popup?

Thanks

score 1 · Accepted Answer · answered Jun 15 '17 at 11:36

1

Your modal is closing, because you have data-dismiss="modal" attribute on the .sendToUser button. Removing this attribute should prevent the modal from closing.

answered Jun 15 '17 at 11:36

Stanislav Kvitash

4,614
18
29

Glad to help. You may want to close the modal manually in your method - [here is a related question](https://stackoverflow.com/questions/16493280/close-bootstrap-modal) :) – Stanislav Kvitash Jun 15 '17 at 11:40

score 0 · Answer 2 · edited Jun 15 '17 at 12:17

0

You need to remove attribute data-dismiss="modal" at the .sendToUser element.
If you need to close modal, you just need to add the code:

$('#userSelectionModal').modal('hide')

edited Jun 15 '17 at 12:17

kkakkurt

2,790
1
30
33

answered Jun 15 '17 at 11:43

O. Borcuhin

234
2
5

score 0 · Answer 3 · answered Nov 28 '20 at 18:32

0

use within your script

window.location = "..\path after validation"

also avoid data-dismiss="modal" in submit button

answered Nov 28 '20 at 18:32

Ramoz

5
2

Roberts Cipulis · Answer 4 · 2022-05-26T05:52:12.350

0

Simply instantiate a variable that's tied to the events firing within the modal window - to false, further set the variable to false when deemed necessary (e.g. to prevent closing the modal when the alert pops up), and then finally when the window should normally close, do a quick "if check" that assesses if the variable is finally true and if it is, fire off the functionality that lets the modal close. This ensures that the modal window will close only when you allow it.

edited May 26 '22 at 05:52

answered May 26 '22 at 05:49

Roberts Cipulis

1
1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 26 '22 at 06:14

bootstrap modal closes when ok on alert() is clicked

4 Answers4