flavr——好看的jQuery对话框

最新推荐文章于 2024-07-24 21:03:00 发布

梁阿信

最新推荐文章于 2024-07-24 21:03:00 发布

阅读量515

点赞数 1

文章标签： css javascript jquery

本文链接：https://blog.csdn.net/weixin_43952978/article/details/105104445

版权

flavr描述

flavr是一款时尚的弹出对话框，样式比较好看，使用了流行的animate.css动画，flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。

flavr特点

1.清洁和现代平面设计

2.充分响应

3.轻量级的、功能强大的

4.基于Bootstrap 开发

5.CSS3动画在现代浏览器

6.jQuery提供动力

7.跨浏览器支持

flavr的使用

1.css和js的引用

<!-- jQuery和bootstrap必须加载，这个是弹窗的基本提供 -->
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/popper.js" ></script>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.css"/>
<script type="text/javascript" src="bootstrap-4.0.0-dist/js/bootstrap.js"></script>

<!--以下是flavr所需要的CSS与JS -->
<link rel="stylesheet" href="flavr/css/animate.css">
<link rel="stylesheet" href="flavr/css/flavr.css">
<script type="text/javascript" src="flavr/js/flavr.min.js"></script>

2.使用方法

在这里只给出简单的提示框与确认框的代码，其余的代码可在文章末尾的链接处查看。

（1）提示框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="jquery/jquery-3.4.1.js" ></script>
		<script type="text/javascript" src="js/popper.js" ></script>
		<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.css" />
		<script type="text/javascript" src="bootstrap-4.0.0-dist/js/bootstrap.js" ></script>
		<link rel="stylesheet" href="flavr/css/animate.css" />
		<link rel="stylesheet" href="flavr/css/flavr.css" />
		<script type="text/javascript" src="flavr/js/flavr.min.js" ></script>
		
	</head>
	<body>
        <!--将button的onclick置为你所写的调用flavr函数-->
		<button onclick="testFlavr()">OK</button>
	</body>
	<script>
		function testFlavr(){
			new $.flavr('Hello World!');
		}
	</script>
</html>

提示框效果：

（2）对话框

<body>
	<button onclick="testFlavr2()">test2</button>
</body>


<script>
		
		function testFlavr2(){
			new $.flavr({
				content:'Yesy Or No?',
				dialog:'confirm',
				onConfirm:function(){//点击确认后的回调函数
					alert("Yes");
				},
				onCancel:function(){//点击取消后的回调函数
					alert("No");
				}
			});
		}
	</script>

对话框效果：

flavr下载地址：http://www.jq22.com/jquery-info2933

梁阿信

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flavr——好看的jQuery对话框

flavr描述flavr是一款时尚的弹出对话框，样式比较好看，使用了流行的animate.css动画，flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。flavr特点1.清洁和现代平面设计2.充分响应3.轻量级的、功能强大的4.基于Bootstrap 开发5.CSS3动画在现代浏览器6.jQuery提供动力7.跨浏览器支持flavr的使用...
复制链接

扫一扫