弹出层layer的使用心得

最新推荐文章于 2023-05-18 13:55:37 发布

老贼大魔王

最新推荐文章于 2023-05-18 13:55:37 发布

阅读量2.4k

点赞数

分类专栏： web插件文章标签：插件

本文链接：https://blog.csdn.net/qq_36637705/article/details/71404453

版权

web插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天写一个弹出层插件layer的使用心得，推荐仔细阅读官方API。

主要是说明如何在弹出的页面里改变title。

1.先附上主页面的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path=request.getContextPath();
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js" ></script>
        <script type="text/javascript" src="<%=path%>/js/layer/layer.js"></script>
        <title>layer的使用</title>
        <script type="text/javascript">
            var PATH = '<%=path%>';
            $(function(){
                $("#button").on('click',function(){
                    layer.open({
                        type: 2,
                        anim:6,
                        title: '旧title',
                        maxmin: false, //开启最大化最小化按钮
                        area: ['350px', '200px'],
                        content: PATH + "/layer.jsp"
                     });
                });
            });
        </script>
    </head>
    <body>
        <div id="button">点击我弹出layer</div>
    </body>
</html>

可以看出上边代码中弹出页的title为“旧title”，开发时可能在弹出页中查询了数据库等操作，想要改变title内容，这时要怎么做。

2.附上弹出页面layer.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.title('title改变后', index);
        </script>
    </head>
    <body>
        <p>layer弹出窗口内容</p>
    </body>
</html>

可以看到上边的代码中是如何改变title内容的，在开发中如果从数据库中查出数据，可以放在‘title改变后’这里改变title。具体使用观看官方API。

注意：以上是改变title的用法。有时有可能弹出层不在屏幕正中间注意用HTML5页面，就是将
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
改为
<!DOCTYPE html>。