smoke.js

smoke.js 是一套跨浏览器标准化了的警告窗口,因为平常使用的alert,confirm prompt等警告框在不同的浏览器弹出来的时候会有不同的样式,所以就有了smoke.js;smoke.js是一个轻量级且灵活的JavaScript插件,支持回调函数,在不同浏览器上都好用,比较个性化。

 

如果你想在不同浏览器上弹出统一样式的警告窗口,那你就得使用smoke.js了,smoke.js包含了这几个警告框:Alert:常规的alert窗口

Comfirm:带有yes和no按钮的Alert窗口

Prompt:带有输入框的Alert窗口

quiz:带有选择的Alert窗口

在使用smoke.js之前你得需要下载插件,即下载smoke需要的smoke.css和smoke.js然后引入你写的页面中;

这些插件你可以到http://smoke-js.com下载。 

话不多说,下面给演示一下这几个框怎么使用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>smokeTest</title>
		<link rel="stylesheet" href="css/smoke.css" type="text/css" media="all">
		<script type="text/javascript" src="js/smoke.js" ></script>
	</head>
	<body>
		<input type="button" value="alert" onclick="alertTest();" />
		<input type="button" value="confirm" onclick="confirmTest();" />
		<input type="button" value="prompt" onclick="promptTest();" />
		<input type="button" value="quiz" onclick="quizTest();" />
		
	</body>
	<script type="text/jscript">
//alert对话框

	function alertTest (){
		
smoke.alert("您已经点击按钮了!", function(e){
	
}, {
	ok: "确定",
	cancel: "Nope",
	classname: "custom-class"
});
		
	}	
		
	//confirm对话框
	
	function confirmTest (){
		
smoke.confirm("是否要删除?", function(e){
	if (e){

	}else{

	}
}, {
	ok: "确定",
	cancel: "取消",
	classname: "custom-class",
	reverseButtons: true
});
	}	
		
	//prompt对话框
	
	function promptTest (){
		
smoke.prompt("请输入您要添加的内容", function(e){
	if (e){

	}else{
	
	}
}, {
	ok: "确定",
	cancel: "取消",
	classname: "custom-class",
	reverseButtons: true,
	value: "此处输入内容"
});
	}	
		
	//qiuz对话框
	
    function quizTest(){
		
smoke.quiz("你的选择是?", function(e){
	if (e == "A"){

	}
}, {
	button_1: "A",
	button_2: "B",
	button_3: "C",
	button_4: "D",
	button_cancel: "Nothing"
});
	}	
		
		
	
		
		
	</script>
</html>

 

alert演示                                                                                                                                                                           
smoke.js 

   confirm演示                      smoke.js

  
 prompt演示                                                                                                                                                               
smoke.js 

 quiz演示                             smoke.js
 
 

你可能感兴趣的:(alert,confirm,prompt,弹出框,smoke.js)