JQuery alert是前端開發中常用的提示信息工具,但默認的樣式較為簡陋。本文將介紹如何使用jquery美化alert彈窗。
首先,在HTML中引入jQuery和jquery.toast.min.css、jquery.toast.min.js兩個文件。如果你已經使用了其他類似插件的文件,也需注意文件間的引用順序和路徑。
<link rel="stylesheet" type="text/css"href="jquery.toast.min.css"> <script type="text/javascript"src="jquery-3.3.1.min.js"></script> <script type="text/javascript"src="jquery.toast.min.js"></script>
然后可以開始自定義alert樣式。使用以下代碼,可自定義alert窗口的各個元素的樣式。
$.toast({ text: '自定義內容', heading: '自定義標題', icon: 'info', // 支持 info、warning、error、success,不填則不顯示圖標 showHideTransition: 'fade', // 支持fade、slide allowToastClose: true, hideAfter: 3000, //三秒后自動關閉 stack: false, // 開啟則會將此toast添加到其他toast下面 position: 'top-right', //top-left top-right bottom-left bottom-right center bgColor: '#4676ff', //背景顏色 textColor: '#fff', //文本顏色 textAlign: 'left', //文本對齊方式 loader: false // 是否啟用loader效果 });
其中,showHideTransition、allowToastClose、hideAfter、stack、position、textColor、textAlign、loader等屬性都可根據實際需求來設置。值得注意的是,位置可選的值中,包括了center,即可將alert窗口居中顯示。
使用以上代碼后,就可以在網頁中展示美觀的alert提示窗口了。