1

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>
  • have you tried to change the id unto more valid id name? e.g. "#mymodal". Perhaps you may try to see this "http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html" – Juliver Galleto Dec 17 '15 at 13:32
  • Code Demon, yes, that was the solution. Such a stupid mistake, IDs cannot start with a number. Can you post that as an answer so I can mark it as the correct one, for future reference. Not that anyone is likely to make such a mistake hahaha. –  Dec 19 '15 at 09:48
  • Your ID name is not valid, please check this [valid ID names](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html%22) – Juliver Galleto Dec 20 '15 at 14:40

4 Answers4

1

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

Community
  • 1
  • 1
Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
0

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

See documentation for modal here: Bootstrap Modal Example

J. Titus
  • 9,535
  • 1
  • 32
  • 45
  • 2
    `tabindex` is for shifting the focus and `role` is for assistive readers. They have nothing to do with it –  Dec 19 '15 at 09:49
  • Not having tabindex causes the problem you were seeing on iOS. I ran into that issue before which is why I assumed that was the problem. – J. Titus Dec 19 '15 at 13:50
  • I'll add them just to be on the safe side –  Dec 25 '15 at 11:31
0

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.

Sravan
  • 18,467
  • 3
  • 30
  • 54
-1

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.

typeo.top
  • 1
  • 2