好看的alert樣式或者彈窗樣式


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

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

一、引入js和css文件

二、js調用替代alert

 

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

2、或者下載之后再引入。

 

二、js調用替代alert

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

 1、標准彈出框

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

 


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 });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM