BootStrap的模式對話框比Qt的用起來簡單。

如要實現下面效果：

對應的html代碼如下：

<button type="button" class="btn btn-dark border text-white w-100" data-bs-toggle="modal" data-bs-target="#exampleModalToggle">購買</button><div class="modal fade" style="border-color: white" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content bg-dark text-white" style="border-color: white"><div class="modal-header bg-dark text-white"><h5 class="modal-title" id="exampleModalToggleLabel">提示</h5><button type="button" class="bg-transparent border-0" data-bs-dismiss="modal" aria-label="Close"><img src="./icon/x-circle-fill.svg"></button></div><div class="modal-body bg-dark text-white">是否確認購買</div><div class="modal-footer"><button type="button" class="btn text-white border bg-dark" data-bs-dismiss="modal">取消</button><button type="button" class="btn text-white border bg-dark" onclick="purchaseProduction()">確定</button></div></div></div> </div>

?其中點擊確定后調用purchaseProduction()對應的js如下：

<script>function purchaseProduction(){console.log("here");} </script>

總結

以上是生活随笔為你收集整理的BootStrap笔记-Model（模式对话框）样式修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。