以外部浮动框为中心的位置模态

Question

我有一个bootstrap 4模态，我希望显示一点不同。我想在模式左侧显示一个浮动框。

我的问题是，即使浮动框位于模态外部且位置绝对，如何将模态框和浮动框都放置在页面中央？

这是当前的样子，浮动框的绝对位置为左负：

这就是我想要的样子，框和模态居中：

我不知道我需要修改多少模态才能做到这一点，因为我希望也能使它响应。

有人会对我如何实现这一目标有任何想法吗？非常感谢。

谢谢，伙计们。

.affix-box {
  position: absolute;
  top: -40px;
  left: -100px;
  width: 200px;
  height: 100px;
  background-color: green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

      <!-- Modal -->
      <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
          <div class="modal-content">
            <div class="affix-box"></div>
            <div class="modal-header">
              <h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将width: 91%;和left: 9%;添加到modal-content

.affix-box {
  position: absolute;
  top: -40px;
  left: -100px;
  width: 200px;
  height: 100px;
  background-color: green;
}
.modal-content{
width: 91%;
left: 9%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

      <!-- Modal -->
      <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
          <div class="modal-content">
            <div class="affix-box"></div>
            <div class="modal-header">
              <h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

这是简单的替换。 我使用的是$(function() { $('.dragModule').draggable({ connectToSortable: '#dropableArea', helper: 'clone' }); $('#dropableArea').droppable({ accept: '.dragModule', activeClass: 'active-droppable' }); $('#dropableArea').sortable({ accept: '.dragModule', connectWith: '#dropableArea', revert: true, receive: function (event, ui) { console.log("drop"); } }); $("#dropableArea").disableSelection(); }); 而不是 beforeStop : function (event, ui) { ui.helper.html('hello'); } 和top，它在模态的左上角设置了浮动框的中心。

left

transform: translate(-50%, -50%);

Answer 3

除了@Joykal所说的之外，您还可以尝试更改模型大小以减小其宽度，还可以根据需要使用.modal-sm或.modal-lg类而不是.modal-xl

<div class="modal-dialog modal-dialog-centered modal-xl" role="document">

Answer 4

也许这会对您有帮助

Python 3.7.1 (default, Dec 10 2018, 22:54:23) [MSC v.1915 64 bit (AMD64)] :: Anaconda, Inc. on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import re
>>> pattern = re.compile(r'[a-zA-Z0-9%_+-.]+\@[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})')
>>> all = pattern.findall('tara9090@gmail.com blah monkey tanbajg@chscv.in')
>>> print(all)
['.com', '.in']
>>>