Положение модальное по центру с плавающей внешней коробкой

Question

У меня есть модальный бутстрап 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

Может быть, это поможет вам

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  #myModal .close{
  display: none;
  }
  </style>

 <script>

$(document).ready(function(){
  $(".btn").click(function(){
     $("#myModal").modal('show');
     $("#myModal2").modal('show');

  });

    $(".close,.close-btn").click(function(){
     $("#myModal").modal('hide');
     $("#myModal2").modal('hide');

  });

});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
 <button type="button" class="btn">Basic</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog" style="right: 50%;">
    <div class="modal-dialog"> 
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>

      </div>
    </div>
  </div>
   <!--/. Modal -->

    <!-- Modal -->
  <div class="modal fade" id="myModal2" role="dialog"  style="left: 50%;">
    <div class="modal-dialog"> 
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close-btn" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
   <!--/. Modal -->

</div>
</body>
</html>

Answer 3

В дополнение к тому, что сказал @Joykal, вы также можете попробовать изменить размер модели, чтобы уменьшить ее ширину, вы можете использовать класс .modal-sm или .modal-lg вместо .modal-xl в зависимости от ваших потребностей

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

Answer 4

Вот простая замена.вместо top и left я использовал transform: translate(-50%, -50%);, который устанавливает центр плавающего прямоугольника в верхнем левом углу модала.

.affix-box {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: green;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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