CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user5691046
user5691046

Reputation:

Bootstrap Modal only triggering Backdrop

I've been trying to find a solution to this for hours but for some reason the bootstrap modal is not showing up, only the backdrop appears.

I've checked the code to match the correct syntax, i've included the correct files and in correct order. I took these files from another site of mine on which it's working perfectly but not here. I have only one other js file and i tried disabling that as well.

When I click the button, I can see in the console that bootstrap.js applies classes to body and backdrop elements but not the .modal element. It's like it can't find that class at all. Here's the Code:

<button  type="button" data-toggle="modal" data-target="#1"><i class="fa fa-clone"></i></button>

and

<div id="1" class="modal fade">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><h4>Dhananjay</h4></h4>
        </div>
        <div class="modal-body">
           <table class="table table-hover">
                <tr class="active">
                        <th>Order ID</th><th>Source</th><th>Destination</th><th>Date</th><th>Cost</th><th></th>
                </tr>
                                    <tr>
                    <td>1</td><td>110034</td><td>113344</td><td> Thursday 19th November 2015</td><td>10</td> <!-- Change ID -->
                </tr>
                                            <tr>
                    <td>2</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
                </tr>
                                            <tr>
                    <td>3</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
                </tr>
                                            <tr>
                    <td>4</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
                </tr>
                                            <tr>
                    <td>5</td><td>110034</td><td>205263</td><td> Monday 7th December 2015</td><td>20</td> <!-- Change ID -->
                </tr>
                                        </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

Upvotes: 1

Views: 3865

Answers (4)

typeo.top
typeo.top

Reputation: 3

I faced the same problem, I just had my modal inside another hidden div so I couldn't see it. Sometimes a broken bootstrap can cause it also.

Upvotes: -1

Juliver Galleto
Juliver Galleto

Reputation: 9037

have you tried to change the id unto more valid id name? e.g. "#mymodal". Perhaps you may try to see this valid ID names

Upvotes: 1

Sravan
Sravan

Reputation: 18647

And also please check the, 'data-target' and the id of the div are same. once remove the '#' from the id and check.

<button type="button" data-toggle="modal" data-target="1">

Also add tabindex="-1" role="dialog" to modal.

Upvotes: 0

J. Titus
J. Titus

Reputation: 9690

You're missing tabindex="-1" role="dialog" on the top-most div.

See documentation for modal here: Bootstrap Modal Example

Upvotes: 0

Related Questions