Bootstrap模式未正确显示

时间:2014-12-23 11:52:34

标签: jquery html css twitter-bootstrap

我使用的是Bootstrap v3.0.1和jquery-1.11.0,我的Bootstrap模式有一个问题,但是没有正确显示。

HTML

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


这看起来像这样:

enter image description here

2 个答案:

答案 0 :(得分:1)

检查你有jquery 1.9.0或更高版本。这种模式适合我。

<div class="modal" id="modalEx">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
            Content Part goes here...
    </div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save</a>
    </div>
  </div>
</div>

事件呼叫部分:

$('#modalLaunch').click(function(){
 $('#modalEx').modal({show:true})
});

答案 1 :(得分:1)

正确显示,但它不能正常运行 。如果我看到它正确,你想要一个模态窗口,它出现在父框架中。这不行,简单明了。

模态窗口应该来自父框架,然后它将按您的意愿工作。