Question

我确实有这里描述的问题......

https://github.com/jschr/bootstrap-modal/issues/132

总之，我有一个带有2个不同高度标签的模态 - 当模态加载时（无论选择哪个标签），它都完美居中，但是当我点击一个新标签时它不会重新进入考虑新标签的高度。

在github链接上找到答案，我最近可以通过控制台使用...

$('#signInUpModal').modal();

（不完全如github上所列，但由于某种原因使用“.modal（'layout'）”错误，而“.modal（）”完美地运行。

但奇怪的是，如果我在必须单击以切换新选项卡的li元素的onclick方法上调用.modal（），则无法进行任何更改。这是有希望讲述故事的相关代码......

<div class="modal fade bs-modal-sm" id="signInUpModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title" id="signInUpTitle" style = "font-weight: bold;">Modal Title</h4>
        </div>
        <div class="bs-example bs-example-tabs">
            <ul id="myTab" class="nav nav-tabs nav-justified"> 
              <!-- TRYING TO CALL .modal() ONCLICK HERE ISN'T WORKING-->
              <li class="active"><a href="#signin" onclick="console.log('clicked'); $('#signInUpModal').modal();" data-toggle="tab">Sign In</a></li>
              <li class=""><a href="#signup" onclick="console.log('clicked'); $('#signInUpModal').modal();" data-toggle="tab">Sign Up</a></li>
            </ul>
        </div>
        <div class="modal-body">
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="signin">
               <form id ="signInForm" class="form-horizontal"> 
                  <!-- the sign in tab form -->
                </form>
            </div> <!-- signin-->
            <div class="tab-pane fade" id="signup">
                <form id ="signUpForm" class="form-horizontal">
                  <!-- the sign up tab form -->
                </form>
            </div> <!-- signup-->
          </div><!-- myTabContent-->
        ...

关于为什么通过控制台而不是通过onclick方法工作的任何想法都将非常感激！

Answer 1

试试这个：

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Answer 2

这是最终达到我想要的结果的代码......

<script>
$(document).ready(function() {

    $('.nav-tabs a').on('shown.bs.tab', function(event){
        $('#signInUpModal').modal();
    });

});
</script>

在阅读http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp后，我意识到我最初的问题是我所依赖的事件没有触发应用于我的模态的CSS过渡

手动垂直居中的自举模式

2 个答案: