完美的alert美化

默認的alert總是在好看的樣式下顯得格格不入，所以在網上搜尋良久，終於找到了一個完美的美化方案。體驗請點我

一、引入js和css文件

二、js調用替代alert

 

一、引入js和css文件

1、直接在head引入

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

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

 

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

 

附：

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

2、阿里雲100+產品1000元代金券：點我領取

3、企業高性能雲首購5折：點我點我

4、突發性實例特價，1核1G，1年僅需293：點我查看

 

函數的更多用法，請訪問SweetAlert中文網，同時該項目來源於GitHua的SweetAlert項目

個人博客：www.huangwx.cn