对于每个触发器，如何在其触发器上动态显示 bootstrap-5 模态位置答案

【问题标题】：How to show bootstrap-5 modals position dynamically on its trigger, for each trigger对于每个触发器，如何在其触发器上动态显示 bootstrap-5 模态位置
【发布时间】：2021-07-15 03:55:05
【问题描述】：

如何动态显示 bootstrap-5 模态的位置？我正在尝试创建一个 Google 日历克隆，假设.. 当我们在 28 日有更多活动并且如果我们单击 4 更多如下图所示，那么该模式应该在 28 日星期三打开到其专用框，而不是中心或任何其他地方。 DEMO

【问题讨论】：

你的意思是说modal应该在第28个边界框内打开？不超过第 1 或第 6 等？
是的，如果你点击 20 日，那么模态应该出现在 20 日
好的，知道了。在这种情况下你需要做Popovers。
实际上，我尝试过但不知道如何在 javascript 中使用它，因为如果我们使用使用 js 的弹出框模板，我想要很多在普通弹出框中不可能的事情，那么它就可以工作，我知道如何在 Javascript 中使用弹出框，你能告诉我吗？ v5.getbootstrap.com/docs/5.0/components/popovers/#options
检查演示。

标签： javascript html css bootstrap-5

【解决方案1】：

Modal 不是相对于触发元素定位的，但 Popovers（和 Tooltips）是相对的。这是一个使用 Popovers 的示例...

在带有事件的单元格的标记中添加弹出框...

   <tr>
           <td>24</td>
           <td><div class="badge bg-info" 
                    data-bs-toggle="popover" 
                    data-bs-placement="bottom" 
                    data-bs-html="true"
                    >25</div>
           </td>
           <td>26</td>
           <td>27</td>
           <td>28</td>
           <td>29</td>
           <td>30</td>
   </tr>

在隐藏的 DOM 元素中包含细节，或者在 JS 中动态创建元素...

   <div class="d-none">
        <div id="dailyEventsContent">
            <div class="rounded p-1 my-1 bg-info small text-white">8:00 event 1</div>
            <div class="rounded p-1 my-1 bg-info small text-white">8:40 event 2</div>
            <div class="rounded p-1 my-1 bg-info small text-white">9:30 event 3</div>
            <div class="rounded p-1 my-1 bg-info small text-white">10:00 event 4</div>
            <div class="rounded p-1 my-1 bg-info small text-white">3:00 event 5</div>
        </div>
   </div>

启用弹出框并设置content 选项

var popoverContent = document.getElementById('dailyEventsContent')
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl, {
      content: popoverContent
  })
})

https://codeply.com/p/AKvIsoHJOl

【讨论】：