如何在触发元素旁边打开Bootstrap模态? [英] How can I open a Bootstrap modal beside the trigger element?
问题描述
对不起，我的英语...
Sorry for my English...
我的代码
<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">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
</div>
</div>
我要在原始图像旁边打开模式窗口.
I to want the modal window open beside from original image.
我尝试了 flex 和< style>
.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 来生成此图片，
But because of modal open per default at the top, to come this image,
我想要哪个 modal 居中于打开的窗口的中心，并且除了原始图像之外，它还会打开.
I to want which modal centred the open window and it open besides from the original image.
可以请人帮我解决这个问题，谢谢！
Can please someone help me with this problem, Thanks!
推荐答案
您想要的东西不容易实现，因为Bootstrap模态不是为此目的而开发的.这并不是说无法完成，而是有更好的UX解决方案，而不是尝试将模式添加到此UI行为中.
What you want is not easily achievable, as Bootstrap modal wasn't developed for this purpose. That's not to say it can't be done, but rather that there are better UX solutions than trying to crowbar a modal into this UI behavior.
这是因为Bootstrap模态旨在完全忽略其呈现的页面布局并占据整个视口.它还会在打开页面时禁用页面滚动，并在< body> 级别上创建一个覆盖整个页面的背景.
That's because Bootstrap modal is designed to completely ignore the layout of the page over which it renders and to occupy the entire viewport. It also disables scrolling on the page while it's open and it creates a backdrop at <body> level which covers the entire page.
针对您的用例的更好方法是将产品动态注入并在其中进行展示.
A better approach for your use case would be to dynamically inject the product into the modal and display it there.
另一种可能的解决方案是使用Bootstrap popover (这是针对您的用例而设计的-相对于特定元素的模态" ).可以认为这是用模态培育工具提示的结果.但是，它越像模式，它将产生更大的UI问题.
Another possible solution is to use a Bootstrap popover (which was pretty much designed for your use case - a "modal" relative to a particular element). Think of it as the result of breeding a tooltip with a modal. But the more it is like a modal, the bigger UI problems it's going to generate.
在我看来，弹出窗口违反了很多UX最佳实践原则，并且通常需要针对各种设备+平台组合进行大量修复/变通.总体而言，它们倾向于使您的应用程序更脆弱，代码的灵活性更低，因此，我强烈建议您不要使用它们.
In my opinion, popovers break a lot of UX best practice principles and typically require a lot of fixes/workarounds for various device + platform combos. Overall they tend to make your application more brittle, your code less flexible, so I strongly advise against using them.
就我而言，唯一的体面解决方案是禁用移动设备上的弹出窗口，并提供一种适合移动设备的替代方法(手风琴，模式，抽屉).但是，如果您要这样做，为什么不尝试保持一致并在台式机上也提供相同的替代方案，以适应额外的可用空间呢?
As far as I'm concerned, the only decent solution is to disable popovers on mobile devices and provide a mobile-friendly alternative (accordion, modal, drawer). But, if you're gonna do that, why not try to be consistent and provide the same alternative on desktops as well, adapted to the extra available space?
如果您需要实施任一解决方案的帮助，请查阅Bootstrap文档以获取以下信息:a) popovers
If you need help implementing either solution, please consult Bootstrap documentation for a) dynamically injecting content into modals or b) using popovers.
如果您遇到任何麻烦，建议您提出一个针对特定问题的新问题.
If you run into any trouble, I suggest you ask a new question focusing that specific problem.
这篇关于如何在触发元素旁边打开Bootstrap模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
