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

Question

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

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