jquery - shown.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 is fired when the modal has been made visible to the user
(will wait for CSS transitions to complete).

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

所以这个:

<div class="modal" >

会变成这样:

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

它会从上次停下的地方继续，然后尝试重新定位。但是，只有当模态不需要在请求之间更改时，这才有用。

解决方案 - 第 1 部分

相反，您需要点击 show.bs.modal 事件，该事件将在元素显示之前触发并此时重新定位.

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

jQuery UI does not support positioning hidden elements.

解决方案 - 第 2 部分

作为解决方法，根据此 Stack Overflow question on jQuery ui positioning keep changing ，您可以将模态样式设置为不可见 block 以帮助计算位置:

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