好看的alert彈窗或樣式彈窗

該樣式是我網上搜尋的，風格好看又簡潔，不失大雅！

就不過多描述了，自己體驗一下吧~：點我體驗一番

一、引入js和css文件

1、引入js和css文件

直接在head引入：

<link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css"><script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>

注意此引用方式不穩定，如果遇到bug，請使用第二種下載的方式引入，如遇到某個元素不顯示，或奇怪的bug,第一時間去控制臺看元素不顯示原因，比如我就遇到一個因為優先級問題成功（success）的彈窗的對號被蓋住導致沒有正確的動畫效果，解決辦法為在sweetalert.css中將success圖標的z-index改為1或者0

2、或者下載之后再引入。
下載鏈接在文末

二、js調用替代alert

二、js調用替代alert

直接使用swal()函數替代alert函數即可，同時sweetalert還提供更加多樣化的彈出框。

1、標準彈出框

swal("開始這個完美的彈出框旅程吧！")

2、帶標題和文本的alert

swal("這是標題！","這是文本")

3、成功的提示，可以帶動畫效果的哦

swal("這還是標題！","這還是文本","success")

4、帶函數傳值的alert

swal({ title: "確定刪除嗎？", text: "你將無法恢復該虛擬文件！", type: "warning",showCancelButton: true, confirmButtonColor: "#DD6B55",confirmButtonText: "確定刪除！", cancelButtonText: "取消刪除！",closeOnConfirm: false, closeOnCancel: false },function(isConfirm){ if (isConfirm) { swal("刪除！", "你的虛擬文件已經被刪除。","success"); } else { swal("取消！", "你的虛擬文件是安全的:)","error"); } });

5、可以內嵌html代碼的alert

swal({ title: "HTML <small>標題</small>!",text: "自定義<span style='color:#0000FF'>這是藍色的<span>。", html: true });

附：

js+css下載地址：點我下載

該文章轉載自https://blog.csdn.net/windy1001/article/details/82685977
原文出處地址http://mishengqiang.com/sweetalert/

總結

以上是生活随笔為你收集整理的好看的alert弹窗或样式弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

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