CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Interstellar
Interstellar

Reputation: 674

Bootstrap window closes after alert statement

I've below bootstrap modal. I'm just showing only 2 fields here. But I've more than 10 fields which are all mandatory. I'm doing javascript validation on click of Add button in Add_click(); and alerting user that All fields are mandatory. After click on Alert, the Modal window just goes off. I need this window to be retained until user gives all the details. 

<div id="modalUserAddition" class="modal fade">
            <div class="modal-dialog" style="width: 600px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;<span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title">User Details</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <input type="text" id="txtUserName" class="form-control" runat="server" placeholder="User Name"   />
                        </div>
                        <div class="form-group">
                            <input type="text" id="txtPassword" class="form-control" runat="server" placeholder="Password" />
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="Close" class="btn btn-default" data-dismiss="modal">Close</button>

                        <button type="button" id="Add" onclick="Add_click();" class="btn btn-primary" data-dismiss="modal">Add User</button>

                    </div>

                </div>
            </div>
        </div>

I tried below code, but it didn't work for me. 

alert('All fields are mandatory!');
    //$('#modalUserAddition').modal('toggle');
    $('#modalUserAddition').modal({
        show: true
    });

Please help!

Upvotes: 2

Views: 5742

Answers (4)

Lorena Pita
Lorena Pita

Reputation: 1516

It worked for me putting data-backdrop="static" in the button and return false; when returned the validations results.

Upvotes: 0

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

I think you are clicking outside the modal when you click on the alert, and it is closing the modal due to its native behavior. You can use the backdrop option. Passing this option with value static will prevent closing the modal after clicking outside the modal. 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static">
    Launch demo modal
 </button>

Or you can do it via JavaScript

$('#myModal').modal({backdrop: 'static'})

DEMO

Upvotes: 1

jazZRo
jazZRo

Reputation: 1608

Remove data-dismiss="modal" from the Add button and close the modal in Add_click where the data is proven valid by adding:

$('#modalUserAddition').modal('hide');

Upvotes: 1

U r s u s
U r s u s

Reputation: 6978

Since you're using Bootstrap, perhaps a better alternative would be to use its native alerts.

It would avoid your current issue and be more consistent.

Upvotes: 0

Related Questions