Javascript 使用Twitter Bootstrap 3.0的手机上不显示模态

我正在创建一个网站，当点击一个按钮时，我会弹出一个模式窗口，其中包含一个web表单，它在桌面版网站上运行完全正常，但在手机或平板电脑上不会做任何事情。我在iphone5和ipad上测试了它，但当我点击按钮时什么也没有得到，甚至当我调整浏览器大小以更改为平板电脑或手机布局后在桌面上测试它时，它也不起作用。我使用的是最新版本的bootstrap，我总是使用最新版本的jquery来处理其他一些事情，但与model无关，所以我不确定这是否会影响它。这是我目前拥有的代码

下面是模态，其中包含Web表单

<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>

如果您使用数据切换属性，那么您应该像这样编写代码，并使用Chromes的开发工具检查输出：

<!-- 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>

---

如果在桌面浏览器中打开模式，然后将浏览器窗口调整为移动断点，会发生什么情况？模态消失了吗？只是检查了一下，它仍然停留在屏幕上，所以只有当我试图从较小的尺寸打开它时，你才能发布打开模态的按钮的代码吗？只是让它工作了，与我的数据目标由于某种原因被弄乱有关

<!-- 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>