Как я могу открыть модал Bootstrap рядом с триггерным элементом? - PullRequest
Новая
       30

Как я могу открыть модал Bootstrap рядом с триггерным элементом?

1 голос
/ 15 апреля 2020

Извините за мой Engli sh ...

Мой код 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">  </script>



<div class="container-fluid">
 <div class="row">
   <div class="col"> 
     <div class="product-grid">
        <div class="product-image">
               <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">    
                  <img alt=""  class="bild" src="photo/111.jpg">     
               </a> 
          </div>
          <div class="product-content">
                 <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                <p class="title">Mochila doble tirantes Violeta</p>
                </a>     
            </div>
                <div class="price">$16.00</div>
                <div class="div-zoom">

                  <span class="zum-warenkorb">zum warenkorb hinzufügen</span>
                  <a href="#">
                    <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color:  #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
                    </a>
                </div> 
            </div>
          <div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                   </button>
                        <div class="modal-body">
                             put here, whaterver you want
                        </div>
               </div>
            </div>    
        </div>
     </div>
</div>

Я хочу открыть модальное окно рядом с исходным изображением.

How the Site to show

Я пробовал с flex в , 

.modal-content {
   /* Styles to make the modal visible */
  display: flex !important;
  opacity: 1 !important;
  margin-top: 500px;

}
.modal-dialog {
   justify-content: left !important;
}
.modal-content {
   width: left !important;
}

Но из-за модальный открыть по умолчанию вверху, чтобы получить это изображение,

enter image description here

Я хочу, чтобы модальный центрировал открытие Окно, и он открывается, кроме того, из исходного изображения.

Может кто-нибудь, пожалуйста, помогите мне с этой проблемой, Спасибо!

1 Ответ

1 голос
/ 16 апреля 2020

То, что вы хотите, не легко достижимо, так как модал Bootstrap не был разработан для этой цели. Это не значит, что это невозможно, а скорее в том, что есть лучшие UX-решения, чем пытаться разобраться с модальностью в этом поведении UI.

Это потому, что модал Bootstrap предназначен для полного игнорирования макета страница, над которой он рендерит и занимает весь видовой экран. Он также отключает прокрутку на странице, пока она открыта, и создает фон на уровне <body>, который охватывает всю страницу.

Лучшим подходом для вашего случая использования было бы динамическое внедрение продукта в модальный режим и отображение его там.

Другое возможное решение - использовать Bootstrap popover (который был в значительной степени разработан для вашего случая использования - "модальный" относительно определенного элемента) , Думайте об этом как о результате создания всплывающей подсказки с модальным. Но чем больше он похож на модальный, тем больше проблем с пользовательским интерфейсом он будет создавать.

По моему мнению, поп-версии нарушают множество принципов лучшей практики UX и обычно требуют много исправлений / обходных путей для различных устройств + Платформа комбо. В целом они имеют тенденцию делать ваше приложение более хрупким, а ваш код - менее гибким, поэтому я настоятельно рекомендую не использовать их.

Насколько я понимаю, единственное достойное решение - отключить всплывающие окна на мобильных устройствах и предоставить мобильную альтернативу (аккордеон, модал, ящик). Но, если вы собираетесь это сделать, почему бы не попытаться быть последовательными и предоставить ту же альтернативу на настольных компьютерах, адаптированную к дополнительному доступному пространству?

Если вам нужна помощь в реализации любого решения, обратитесь к Bootstrap документация для а) динамического внедрения контента в модалы или б) с использованием всплывающих окон .

Если у вас возникнут какие-либо проблемы, я предлагаю вам задать новый вопрос, сосредоточив внимание эта проблема c.

...