Question

我一直在尝试使用Bootstrap 3在我的网站上显示模式。下面的代码是从bootstrap网站复制并运行的。

当模态显示它显示在屏幕顶部时 - 是否可以在中心显示它？

<div id="modal" 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-hidden="true">&times;</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>

由于

Answer 1

是的，只需将此类添加到您的css：

.modal-dialog {
   margin-right: 0;
   margin-top: your desired value ;
}

希望这会对你有所帮助

Answer 2

理想情况下它应该但是如果有任何问题你可以使用它我猜这个模态的内容是动态的，所以可以写这个。

var h = ($('.modal').height())/2;
$('.modal').css({'top':'50%','margin-top':'-'+h+'px'});

Answer 3

#modal {
   margin: 0 auto; 
}

渲染模态的最佳方法之一是创建一个单独的部分文件，其中包含整个模态代码（如问题中所示），然后像往常一样数据切换到该div的id。

默认情况下，您的模式应显示在页面布局的中心。但如果没有，那么上面给出的代码应该可以解决问题。

如果仍然没有那意味着你的div类被某些地方覆盖了。在模态上执行检查元素（右键单击+检查元素）并检查哪些CSS类与模态的位置冲突。

按照您的要求从外部文件加载页面：

1）首先创建一个包含所有模态代码的外部文件/部分，并将其保存为 _terms_and_conditions.html.erb （注意：ID很重要）

<div class="modal fade" id="e-terms" 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-hidden="true">&times;</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>

2）现在通过点击链接调用您刚刚创建的外部文件，例如

<a data-target="#e-terms" data-toggle="modal" type="button">Terms and conditions</a>

我们只是将那段模态代码粘贴到另一个文件并调用整个文件本身。这就是它！创建文件的方式可能取决于您使用的语言（因为您没有在任何地方提到它）。但重要的是要定位模态代码的ID，无论它是写在同一个文件还是不同的文件中。

Bootstrap模态位于屏幕中央

3 个答案: