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

Question

对不起，我的英语...

我的代码

<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居中打开的窗口，并且除了原始图像之外，它还会打开。

可以请别人帮助我解决这个问题，谢谢！

Answer 1

您想要的东西不容易实现，因为Bootstrap模态不是为此目的而开发的。这并不是说它不能完成，而是有更好的UX解决方案，而不是尝试将模式插入该UI行为。

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

针对您的用例的更好方法是将产品动态注入到模态中并在其中显示。

[另一种可能的解决方案是使用Bootstrap popover（这是针对您的用例而设计的-相对于特定元素的模式）。可以认为这是用模态培育工具提示的结果。我个人几乎从不使用弹出窗口，因为我相信弹出窗口违反了许多UX质量原则，并且往往需要针对各种设备+平台组合的许多修复/变通办法。总体而言，它们使您的应用程序更脆弱，代码的灵活性更低，我强烈建议您不要使用它们。

就我而言，唯一不错的解决方案是禁用移动设备上的弹出窗口，并提供适合移动设备的替代方案。但是，如果您要这样做，为什么不尝试保持一致并在台式机上也提供相同的替代方案，以适应额外的可用空间？

如果您需要帮助来实现任一解决方案，请查阅Bootstrap文档以将a）dynamically injecting content转换为模态或b）使用popovers。

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

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1