如何使用 Bootstrap 重置弹出模式的位置？

Question

我一直在寻找解决问题的方法，我看到了很多不同的方法来做到这一点，但没有一个对我有用。 我会把我的代码贴在这里，看看你是否能以某种方式帮助我。 我有一个可拖动的弹出窗口来显示注释。主屏幕上有一个项目列表，每次用户单击“查看”链接时，它都会打开带有此特定项目注释的弹出窗口。 一切正常。弹出窗口以正确的信息打开，我可以在屏幕上移动弹出窗口。那么我唯一的问题是： 一旦我关闭弹出窗口并打开一个新窗口，而不是将弹出窗口重置为原始位置，它会在我离开另一个窗口的位置打开。当用户关闭它时，我需要重置弹出窗口的位置。

这是我的 js：

require(['jquery'
    , 'bootstrap'
    , 'datepicker'
    , 'typeahead'
    , 'combobox'
    , 'tagsinput'
], function($){

    // DOM ready
    $(function(){
        $('.modal-dialog').draggable();

        $('#noteModal').on('show.bs.modal', function(e) {

            //get data-id attribute of the clicked element
            var note = $(e.relatedTarget).data('note');
            //populate the textbox
            $(e.currentTarget).find('span[name="note"]').text(note);
        });



    });
});

这是我的 html 页面上的模式：

<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="noteModalLabel">Note</h4>
            </div>
            <div class="modal-body">
                <span name="note" id="note"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

如何在每次用户关闭弹出窗口时重置它的位置？

谢谢！

Answer 1

在您的点击处理程序中，您可以使用 JQuery 来设置模态的 css，如下所示：

if (!$(".modal.in").length) {
  $(".modal-dialog").css({
    top: 0,
    left: 0
  });
}

这将重置您的模态框的位置。你可以在你的 JavaScript 中调用你的模态之前使用它，假设你正在使用 JS 打开你的模态。

尝试运行下面的 sn-p 或查看此 CodePen Demo 以获取使用您的模式的示例。

// DOM ready
$(function() {
  $(".modal-dialog").draggable();
  $("#btn1").click(function() {
    // reset modal if it isn't visible
    if (!$(".modal.in").length) {
      $(".modal-dialog").css({
        top: 0,
        left: 0
      });
    }
    $("#noteModal").modal({
      backdrop: false,
      show: true
    });
  });

  $("#noteModal").on("show.bs.modal", function(e) {
    var note = $('#btn1').data('note');

    $(e.currentTarget).find('span[name="note"]').html(note);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="noteModalLabel">Note</h4>
      </div>
      <div class="modal-body">
        <span name="note" id="note"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button id="btn1" data-note="I am a note. Hello.">Show Modal</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

---

如果您想在打开模式时保持背景可用，我不久前发布了一个解决方案here。

我希望这会有所帮助！