Css 如何打开触发器元素旁边的引导模式？

对不起，我的英语

我的代码

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

但是由于顶部的模式按默认值打开，下面这张图片

我想要哪个模态将打开的窗口居中，并从原始图像中打开

---

请有人帮我解决这个问题，谢谢

您想要的并不容易实现，因为Bootstrap modal不是为此目的开发的。这并不是说这是不可能的，而是说有更好的UX解决方案，而不是试图将一个模式硬塞进这个UI行为中

这是因为引导模式被设计成完全忽略它所呈现的页面的布局，并占据整个视口。它还可以在页面打开时禁用滚动，并在

级别创建一个覆盖整个页面的背景

对于您的用例，更好的方法是动态地将产品注入到模式中并在那里显示

另一个可能的解决方案是使用Bootstrap popover（它几乎是为您的用例设计的，是相对于特定元素的“模式”）。可以将其视为使用模态生成工具提示的结果。但它越像一个模式，它将产生更大的用户界面问题

在我看来，Popover打破了许多UX最佳实践原则，通常需要对各种设备+平台组合进行大量修复/变通。总的来说，它们会使应用程序更脆弱，代码更不灵活，所以我强烈建议不要使用它们

就我而言，唯一体面的解决方案是禁用移动设备上的Popover，并提供移动友好的替代方案（手风琴、modal、抽屉）。但是，如果你要这样做，为什么不尝试保持一致，并在台式机上提供相同的替代方案，以适应额外的可用空间

如果您需要实现任一解决方案的帮助，请查阅引导文档，了解a）到modals或b）使用

---

如果您遇到任何问题，我建议您针对具体问题提出一个新问题。

如果您在项目中使用modal，为什么不

bootstrap

modal？谢谢您的回答！，对不起，我不明白你的意思。。。你能解释一下吗…你在用Bootstrap4吗？如果是，bootstrap为您提供了模态组件，有关更多信息，请访问，谢谢，但在我显示此页面之前，没有找到解决问题的方法…您想说什么？您是否希望忽略引导模式并关注您的问题？

.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;
}