如何在触发元素旁边打开 Bootstrap 模式?
How can I open a Bootstrap modal beside the trigger element?
对不起我的英语...
我的代码
<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">.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>
我想要模态 window 在原始图像旁边打开。
我在 ,
中尝试使用 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 居中打开 window 并且它在原始图像之外打开。
有人可以帮我解决这个问题吗,谢谢!
您想要的东西不容易实现,因为 Bootstrap 模式不是为此目的而开发的。这并不是说它无法完成,而是说有比试图将模态撬入这种 UI 行为更好的 UX 解决方案。
那是因为 Bootstrap 模式旨在完全忽略其呈现页面的布局并占据整个视口。它还会在页面打开时禁用滚动,并在 <body>
级别创建覆盖整个页面的背景。
对于您的用例,更好的方法是动态地将产品注入模态并在那里显示。
另一种可能的解决方案是 使用 Bootstrap 弹出窗口(这几乎是为您的用例设计的 - "modal" 相对于特定元素)。将其视为使用模态生成工具提示的结果。但是它越像模态,它产生的问题就越大UI。
在我看来,弹出窗口打破了许多用户体验最佳实践原则,通常需要大量 fixes/workarounds 才能用于各种设备 + 平台组合。总体而言,它们会使您的应用程序更脆弱,代码更不灵活,因此我强烈建议不要使用它们。
就我而言,唯一合适的解决方案是禁用移动设备上的弹出窗口并提供适合移动设备的替代方案(手风琴、模态、抽屉)。但是,如果您要这样做,为什么不尝试保持一致并在台式机上也提供相同的替代方案,以适应额外的可用 space?
如果您在实施任一解决方案时需要帮助,请参阅 Bootstrap 文档以获取 a) dynamically injecting content into modals or b) using popovers.
如果您 运行 遇到任何麻烦,我建议您提出一个针对该特定问题的新问题。
对不起我的英语...
我的代码
<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">.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>
我想要模态 window 在原始图像旁边打开。
我在 ,
中尝试使用 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 居中打开 window 并且它在原始图像之外打开。
有人可以帮我解决这个问题吗,谢谢!
您想要的东西不容易实现,因为 Bootstrap 模式不是为此目的而开发的。这并不是说它无法完成,而是说有比试图将模态撬入这种 UI 行为更好的 UX 解决方案。
那是因为 Bootstrap 模式旨在完全忽略其呈现页面的布局并占据整个视口。它还会在页面打开时禁用滚动,并在 <body>
级别创建覆盖整个页面的背景。
对于您的用例,更好的方法是动态地将产品注入模态并在那里显示。
另一种可能的解决方案是 使用 Bootstrap 弹出窗口(这几乎是为您的用例设计的 - "modal" 相对于特定元素)。将其视为使用模态生成工具提示的结果。但是它越像模态,它产生的问题就越大UI。
在我看来,弹出窗口打破了许多用户体验最佳实践原则,通常需要大量 fixes/workarounds 才能用于各种设备 + 平台组合。总体而言,它们会使您的应用程序更脆弱,代码更不灵活,因此我强烈建议不要使用它们。
就我而言,唯一合适的解决方案是禁用移动设备上的弹出窗口并提供适合移动设备的替代方案(手风琴、模态、抽屉)。但是,如果您要这样做,为什么不尝试保持一致并在台式机上也提供相同的替代方案,以适应额外的可用 space?
如果您在实施任一解决方案时需要帮助,请参阅 Bootstrap 文档以获取 a) dynamically injecting content into modals or b) using popovers.
如果您 运行 遇到任何麻烦,我建议您提出一个针对该特定问题的新问题。