如何在每个触发器的触发器上动态显示bootstrap-5模态的位置

Question

如何动态显示bootstrap-5通道的位置？我正在尝试创建一个Google日历克隆，假设..当我们在28号有更多的活动时，如果我们点击更多的4个，如下图所示，那么该模式应该在Wed 28号打开到它的专用盒子，而不是在中心或任何其他地方。

DEMO

Answer 1

模态不是相对于触发器元素定位的，但是弹窗(和工具提示)是相对于触发器元素定位的。下面是一个使用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