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

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

html css twitter-bootstrap bootstrap-modal

08.04.2019 07:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

212

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Добавьте 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>

Ваш ответ очень близок. Хотя модальное окно, кажется, обрезается, когда вы минимизируете размер браузера.

— 08.04.2019 08:14

поэтому используйте @media и установите разные размеры для каждого размера экрана

— 08.04.2019 08:20

Спасибо, я использовал медиа-запросы, и это прекрасно работает. Спасибо!

— 08.04.2019 08:23

08.04.2019 07:22

Вот простая замена. вместо 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>

Joykal Infotech, мой вопрос не об этом. Модальное окно и плавающий блок должны располагаться по центру независимо от отрицательных полей или позиций плавающего блока.

— 08.04.2019 08:11

08.04.2019 07:22

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

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

Абхиджит Саксена, мой вопрос не об этом. размер не имеет значения. Что касается модального, он пытается заставить модальное и плавающее окно быть центрированными.

— 08.04.2019 08:10

Крыс, ваше деление на поле «аффикс-бокс» является дочерним элементом «модального диалога». И если вы проверите css этого подразделения, вы поймете, что оно заставит всех своих детей быть центрированными. Итак, если проблема заключается в том, что ваш плавающий блок обрезается из-за размера страницы, вы можете попробовать уменьшить модальный размер или вам нужно заставить плавающий блок отображаться так, как вы хотите, определив CSS, как упомянуто Джойкалом.

— 08.04.2019 09:49

08.04.2019 07:26

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

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

Дипак Ахер, мой вопрос не об этом. Что касается вашего ответа, Bootstrap js уже показывает и скрывает модальное окно....

— 08.04.2019 08:09

08.04.2019 07:50