shown.bs.modal 中的函数仅在第二次调用 modal 后才起作用

Question

我在使用 Bootstrap 模式时遇到了一些问题。第一次调用我的模态时，它位于左侧约 20px 处，但之后根据 .position() 正确定位

这是我的代码：

HTML：

<div class="modal hide" id="AddCommentChat">
    <div class="modal-body">
        <div class="my-element"></div>
    </div>
</div>
<div class="modal hide" id="MyModalWindow"></div>

JavaScript：

$('.my-element').click(function(){
  var that = $(this);
  $('#MyModalWindow').on('shown.bs.modal', function(){
    $(this).position({
      my: 'left top',
      at: 'right bottom',
      of: that
    });
    $('.modal-backdrop').css('background-color', 'transparent');
  }).modal();
}); 

更新： 通过添加下一个代码解决了问题：

        $('#ModalEditingDeleting').css({
            left: 0,
            top: 0
        });

最终代码为：

    $('.comment-manage').click(function(){
        $('#ModalEditingDeleting').css({
            left: 0,
            top: 0
        });
        var that = $(this);
        $('#ModalEditingDeleting').on('shown.bs.modal', function(){
            $(this).position({
                my: 'left top',
                at: 'right top',
                of: that
            });
            $('.modal-backdrop').css('background-color', 'transparent');
        }).modal();
    });

感谢您的帮助！

Answer 1

问题

脚本当前显示一个简短的Flash of Unstyled Content (FOUC)，因为您正在利用 shown 事件，根据Bootstrap Modal Events：

show.bs.modal 在模态对用户可见时触发
（将等待 CSS 转换完成）​​。

它在第一次尝试后似乎工作的唯一原因是因为position() 函数将把该位置作为标记的一部分

所以这个：

<div class="modal" >

会变成这样：

<div class="modal" style="top: 34px; left: 104px;" >

它会从中断的地方重新开始，然后然后尝试重新定位。但是，这仅在模式不需要在请求之间更改时才有用。

解决方案 - 第 1 部分

与其等到它被渲染，你需要点击 show.bs.modal 事件，该事件将在元素显示之前触发并在此时重新定位。

问题在于，此时模式是隐藏的，根据jQuery UI - Position 上的文档：

jQuery UI 不支持定位隐藏元素。

解决方案 - 第 2 部分

作为一种解决方法，根据Stack Overflow question on jQuery ui positioning keep changing，您可以将模态设置为不可见块以帮助计算位置：

.modal {
   display: none,
   visibility: visible
}

解决方案 - 第 3 部分

此外，无需为每次单击按钮重新附加.on() 侦听器。该初始化应该在开始时发生，然后依靠事件处理来调用正确的方法。这确实引入了额外的问题，即您不能再通过函数范围将按钮传递给事件处理程序。

因此，您需要将调用按钮作为数据参数添加到模式中，如下所示：

$('#MyModalWindow').data("source", $(this))

所以你可以像这样在事件处理中读取它：

.position({
   my: 'left top',
   at: 'right bottom',
   of: $(this).data("source")
})

这是 Stack Snippets 中的演示

$('#MyModalWindow').on('show.bs.modal', function(e) {
  $(this)
  .css({
    'display': 'block',
    'visibility': 'hidden'
  })
  .position({
    my: 'left top',
    at: 'right bottom',
    of: $(this).data("source")
  })
  .css({
    'visibility': 'visible'
  });
})

$('.my-element').click(function(){
  $('#MyModalWindow')
    .data("source", $(this))
    .modal();
});

.modal-backdrop.modal-backdrop {
  background-color: transparent
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<button type="button" class="btn btn-primary my-element" >
  Open modal
</button><br/><br/>

<button type="button" class="btn btn-primary my-element">
  Open modal
</button>


<div class="modal fade" tabindex="-1" role="dialog" id="MyModalWindow" >
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        Modal Content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>