好看的alert彈窗或樣式彈窗

該樣式是我網(wǎng)上搜尋的，風(fēng)格好看又簡潔，不失大雅！

就不過多描述了，自己體驗(yàn)一下吧~：點(diǎn)我體驗(yàn)一番

一、引入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>

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

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

二、js調(diào)用替代alert

二、js調(diào)用替代alert

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

1、標(biāo)準(zhǔn)彈出框

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

2、帶標(biāo)題和文本的alert

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

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

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

4、帶函數(shù)傳值的alert

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

5、可以內(nèi)嵌html代碼的alert

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

附：

js+css下載地址：點(diǎn)我下載

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。