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

Question

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

Answer 1

模态框不相对于触发元素定位，但弹出框（和工具提示）相对。这是一个使用 Popovers 的例子...

在带有事件的单元格的标记中添加 Popover...

   <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

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

How to show bootstrap-5 modals position dynamically on its trigger, for each trigger

html

javascript

css

bootstrap-5