jQuery弹窗

最新推荐文章于 2024-03-09 21:19:43 发布

ab599100347

最新推荐文章于 2024-03-09 21:19:43 发布

阅读量877

点赞数

分类专栏： jQuery web

本文链接：https://blog.csdn.net/ab599100347/article/details/45195651

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

第一步：部署

下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：

layer的目录结构

第二步：引入

你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：

<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>

需要引入jQuery1.8及以上和layer.js

第三步：使用

是时候目睹layer的挫样了，由于她是基于jQuery，你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候，你首先应该绑定事件，就像上面的那个例子。

<%@ page language="java" import="java.util.*"  contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
	<!-- 引入弹窗插件 -->
	<script src="js/layer/layer.js" type="text/javascript"></script>
  </head>

<body>
<a id="aa" οnclick="author()"></a>
<script type="text/javascript">
/*
 * 以下函数为弹窗显示信息
 * 使用到了ajax获取json数据，使用了layer弹窗插件。
 */
function author() {
    //小tips
    layer.tips('我是另外一个tips', '#aa', {
        tips: [1, '#3595CC'],
        time: 4000
    });
	
}
</script>
</body>
</html>

注意：1、 tips: [1, '#3595CC'] 中的1表示在#aa元素上方显示弹窗，2、3、4依次为右下左方位。
2、 '#aa' 表示需要在哪个元素旁边显示信息。

下载layer插件及详细用法请查看： http://sentsin.com/jquery/layer/

ab599100347

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery弹窗

第一步：部署下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：第二步：引入你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：需要引入jQuery1.8及以上和layer.js
复制链接

扫一扫

专栏目录