在PHP中,confirm
函數通常用于生成一個模態對話框,讓用戶確認或取消某個操作。然而,confirm
函數已經被棄用,因為它不是響應式的,且在現代web開發中不夠靈活。以下是一些替代方案:
Bootstrap模態框(推薦):
Bootstrap是一個流行的前端框架,它提供了強大的模態框組件。你可以使用Bootstrap的模態框來替代confirm
函數,因為它提供了更好的用戶體驗和響應式設計。
<!-- 觸發模態框的按鈕 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
打開模態框
</button>
<!-- 模態框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模態框標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="關閉">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
這里是你的內容...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
SweetAlert2:
SweetAlert2是一個現代的、響應式的JavaScript警告和確認框庫。它可以替代confirm
函數,并提供更豐富的功能和更好的用戶體驗。
<!-- 引入SweetAlert2 -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- 使用SweetAlert2 -->
<script>
Swal.fire({
title: '你確定嗎?',
text: "這將執行一個操作",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '是的,執行操作'
}).then((result) => {
if (result.isConfirmed) {
// 用戶點擊了確認按鈕
}
})
</script>
自定義模態框: 如果你不想使用第三方庫,也可以自己編寫一個簡單的自定義模態框。以下是一個基本的示例:
<!-- 觸發模態框的按鈕 -->
<button type="button" class="btn btn-primary" onclick="showModal()">打開模態框</button>
<!-- 模態框 -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模態框標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="關閉">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
這里是你的內容...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
<!-- 腳本 -->
<script>
function showModal() {
var modal = document.getElementById('myModal');
modal.style.display = 'block';
var span = document.getElementsByClassName('close')[0];
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
}
</script>
這些替代方案提供了更好的用戶體驗和響應式設計,建議在現代web開發中使用。