CODEWITHSUNDEEP
javascriptjqueryhtml
Husain Alhamali
Husain Alhamali

Reputation: 823

Bootstrap modal is not triggering

I'm trying to create a Bootstrap modal as a requirement of my project, the problem is that I'm unable to trigger this modal using jQuery

this is the modal code:

<div class="container">
    <!-- Trigger the modal with a button -->
    <!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> -->

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Please choose if you want to open an existing ticket or to create a new one.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-toggle="modal">New Ticket</button>
                    <button type="button" class="btn btn-default" data-toggle="modal">Open Ticket</button>
                </div>
            </div>
        </div>
    </div>
</div>

And this is the button from which the modal should be triggered:

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
         <button type="button" id="btnLogin" data-toggle="modal" data-target="#myModal" class="btn btn-success">Submit</button>
     </div>
 </div>

And finally this is the jQuery code:

<script>
    $(document).ready(function () {
        $("#btnLogin").click(function () {
            alert("..");
            $("#myModal").modal();
            alert("..");
        });
    });
</script>

The problem is that the script code is not executing after triggering #myModal element

Any suggestion please?

Upvotes: 1

Views: 296

Answers (5)

Fiido93
Fiido93

Reputation: 1978

Here you go i already fix for you.

reminder always put jquery first after bootstrap.

Example

<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>

i don't know why you need to add that script

$(document).ready(function () {
        $("#btnLogin").click(function () {
            alert("..");
            $("#myModal").modal();
            alert("..");
        });
    });

DEMO

Upvotes: 1

Yasin Patel
Yasin Patel

Reputation: 5731

Try This:

<script>
    $(document).ready(function () {
        $("#btnLogin").click(function () {

            $("#myModal").modal('toggle');

        });
    });
</script>

Upvotes: 1

pumpkinzzz
pumpkinzzz

Reputation: 2967

You need to remove your javascript! There's no need for that...

Bootstrap will already open dialog reading the attributes data-toggle="modal" data-target="#myModal" on your button

So your javascript is causing the closure of modal right after it opens.

See this demo: JSFIDDLE

Upvotes: 1

HuntsMan
HuntsMan

Reputation: 792

use that you should put some parameter in .modal("hide") or .modal("show")

 $("#myModal").modal("show");

and please use this button

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
         <button type="button" id="btnLogin" class="btn btn-success">Submit</button>
     </div>
 </div>

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try this:

$("#myModal").modal('show');

Upvotes: 1

Related Questions