shows.bs.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)，因为您正在点击显示的事件，根据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>