Modals not displaying on mobiles using Twitter Bootstrap 3.0

Question

I am putting together a website where I have a modal pop up with a web form contained in it when a button is clicked, it works completely fine on the desktop version of the website but wont do anything on a mobile or tablet. Ive tested it on an iphone 5 and and ipad but dont get anything when I click the button, and even when I tested it on my desktop after resizing my browser to change to the tablet or mobile layouts it does not work either. I'm using the most recent version of bootstrap and Im always using the most recent version of jquery for some other things but not that have anything to do with the modal so im not sure if that would affect it or not. Here is the code I have currently

Here is the Modal with the Web Form inside of it.

<div class="modal fade" id="booknow" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
        <h2>Header</h2>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" role="form">
        <div class="form-group">
        <label for="location" class="col-sm-4 control-label">Choose a Location</label>
        <div class="col-sm-8">
            <select id="firstSelect" class="form-control">
            <option value="0" selected="selected">None</option>
            <option value="dubai">Dubai</option>
                    <option value="bora">Bora Bora</option>
                    <option value="vancouver">Vancouver</option>
                    <option value="rio">Rio De Janeiro</option>
            </select>
        </div><br></br>
        <label for="resort" class="col-sm-4 control-label">Choose a Resort</label>
        <div class="col-sm-8">
            <select id="secondSelect" class="form-control">
            <option value="0" selected="selected">Choose Location First</option>
                <option class="location dubai">Resort 1</option>
                    <option class="location dubai">Resort 2</option>
                    <option class="location bora">Resort 3</option>
                    <option class="location bora">Resort 4</option>
                    <option class="location vancouver">Resort 5</option>
                    <option class="location rio">Resort 6</option>

            </select>
        </div><br></br>
        <label for="length" class="col-sm-4 control-label">Length of Stay</label>
        <div class="col-sm-8">
            <select class="form-control">
            <option>0 Days</option>
            <option>1 Day</option>
            <option>3 Days</option>
            <option>5 Days</option>
            <option>7 Days</option>
            <option>10 Days</option>
            </select>
        </div><br></br>
        <label for="airlines" class="col-sm-4 control-label">Available Airlines:</label>
        <br></br>
        <label for="name" class="col-sm-4 control-label">Name</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" placeholder="First and Last">
        </div><br></br>
        <label for="email" class="col-sm-4 control-label">Email</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" placeholder="email@example.com">
        </div><br></br>
        <label for="address" class="col-sm-4 control-label">Address</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" placeholder="Enter Address">
        </div><br></br>
        <label for="phone number" class="col-sm-4 control-label">Phone Number</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" placeholder="Enter Phone Number">
        </div>
        <a class="btn btn-default" data-dismiss="modal" id="submit">Submit</a>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn btn-default" data-dismiss="modal" id="close">Close</a>
    </div>
</div>
</div>
</div>

And here is the only CSS I have applied to it in my own stylesheet (this is only in the style sheet that affects the desktop version of the site, I dont have it included in the tablet or mobile versions of the stylesheet I have coded.

.modal-body {
height:400px;
}
.modal-footer > a {
margin-top:0px;
}

Answer 1

If you use data-toggle attribute then you should write your code like this and check your output using Chromes' developer tools:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Fiddle Demo