如何在触发元素旁边打开 Bootstrap 模式？答案

【问题标题】：How can I open a Bootstrap modal beside the trigger element?如何在触发元素旁边打开 Bootstrap 模式？
【发布时间】：2020-07-28 14:58:01
【问题描述】：

对不起我的英语...

我的代码

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

我希望在原始图像旁边打开模态窗口。

我尝试在中使用 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;
}

但由于 modal 默认在顶部打开，所以出现了这张图片，

我想要哪个 modal 使打开的窗口居中，并且它从原始图像中打开。

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

【问题讨论】：

如果你在你的项目中使用了modal，那为什么不用bootstrap modal呢？
感谢您的回答！，对不起，但不明白您的意思...请您解释一下...
您使用的是引导程序 4 吗？如果是，bootstrap 会为您提供模态组件，更多信息请访问getbootstrap.com/docs/4.4/components/modal
谢谢，但在我展示此页面之前并没有找到解决我的问题的方法...
你想说什么？您想忽略引导模式并希望专注于您的问题吗？

标签： css bootstrap-4 bootstrap-modal

【解决方案1】：

您想要的并不容易实现，因为 Bootstrap 模态不是为此目的而开发的。这并不是说它做不到，而是说有更好的 UX 解决方案，而不是试图在这种 UI 行为中使用模式。

这是因为 Bootstrap 模态被设计为完全忽略其呈现的页面布局并占据整个视口。它还会在页面打开时禁用滚动，并在<body> 级别创建覆盖整个页面的背景。

更适合您的用例的方法是将产品动态注入到模态中并在那里显示。

另一种可能的解决方案是使用 Bootstrap 弹出框（它几乎是为您的用例设计的 - 相对于特定元素的 “模态”）。将其视为使用模态培育工具提示的结果。但它越像模态框，它会产生更大的 UI 问题。

在我看来，弹出框违反了许多 UX 最佳实践原则，并且通常需要针对各种设备 + 平台组合进行大量修复/解决方法。总的来说，它们会使你的应用程序更脆弱，代码更不灵活，所以我强烈建议不要使用它们。

就我而言，唯一合适的解决方案是禁用移动设备上的弹出框并提供适合移动设备的替代方案（手风琴、模态、抽屉）。但是，如果您要这样做，为什么不尝试保持一致并在桌面上提供相同的替代方案，以适应额外的可用空间？

如果您在实施任一解决方案时需要帮助，请参阅 Bootstrap 文档以了解 a) dynamically injecting content 进入模态或 b) 使用 popovers。

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

【讨论】：