1. 程式人生 > >自定義彈框樣式,自定義confirm按鈕,

自定義彈框樣式,自定義confirm按鈕,

不同的瀏覽器其自帶的alert();confirm();樣式大致是一樣的,挺醜的。在之前做過的專案中整理了一份彈出框的程式碼。


整理後的程式碼已經上傳github,有興趣的朋友可以看看。

<!DOCTYPE html>
<!--自定義彈框-->
<html lang="zh">
<head>
	<link rel="stylesheet" type="text/css" href="css/mbox.css"/>  <!--背景樣式 彈框樣式-->
	<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script><!--jquery庫-->
	<script type="text/javascript" src="js/jm-qi.js" ></script><!--自定義彈框大小,提示資訊,樣式,icon。。。。-->
</head>
<body>
	<a style="cursor: pointer" class="delcompanyClass">刪除</a>
	<script>					
		$(".delcompanyClass").on('click',function(){
			$.mbox({
				area: [ "450px", "auto" ], //彈框大小
				border: [ 0, .5, "#666" ],
				dialog: {
					msg: "啦啦啦這是彈框提示內容啦啦啦這是彈框提示內容啦啦啦這是彈框提示內容!!",
					btns: 2,   //1: 只有一個按鈕   2:兩個按鈕  3:沒有按鈕 提示框
					type: 2,   //1:對鉤   2:問號  3:歎號  
					btn: [ "試一試", "再看看"],  //自定義按鈕
					yes: function() {  //點選左側按鈕:成功 
						alert();
					},
					no: function() { //點選右側按鈕:失敗
						return false;
					}
				}
			});
		});
	</script>	
</body>
</html>

css和js程式碼已經上傳github上。
https://github.com/xiaobaidu/mine.git

原文來自:http://www.yigangwu.com/index.php?m=content&c=index&a=show&catid=28&id=1點選開啟連結