jQuery 彈窗插件是一種方便的工具,它可以很容易地在網頁上創建彈窗,以增強用戶體驗。
使用 jQuery 彈窗插件,首先需要在 HTML 文件中引入 jQuery 庫文件和插件文件:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.0/dist/sweetalert2.min.js"></script>
然后,在 JavaScript 文件中,可以通過調用彈窗插件的函數來創建彈窗。例如:
// 點擊按鈕彈出信息框 $('button').click(function() { Swal.fire('Hello World!'); });
這個例子中,當用戶點擊頁面上的按鈕,就會觸發函數,彈出一個信息框,顯示 "Hello World!"。
除了普通的信息框之外,彈窗插件還支持更多豐富的彈窗類型,如確認框、加載中等待框、成功或失敗提示框等。例如:
// 提示用戶是否要刪除數據 Swal.fire({ title: 'Are you sure?', text: 'You will not be able to recover this data!', icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!' }).then((result) =>{ if (result.isConfirmed) { Swal.fire( 'Deleted!', 'Your data has been deleted.', 'success' ) } });
這個例子中,當用戶點擊確認框的按鈕時,會彈出一個確認框提示用戶是否確定刪除數據。如果確認刪除,則會彈出一個成功提示框,告知用戶操作已經執行成功。這樣的交互效果可以給用戶更好的使用體驗。
上一篇jquery 得到父元素
下一篇jquery 得到子