【js+css实现右边侧栏抽屉功能效果】

最新推荐文章于 2024-06-21 09:56:36 发布

heronivy

最新推荐文章于 2024-06-21 09:56:36 发布

阅读量3.5k

点赞数

分类专栏：前端文章标签： css javascript 前端

本文链接：https://blog.csdn.net/heronivy/article/details/125137612

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript和CSS创建右侧抽屉效果，提供了一个管理系统后台的右侧弹窗特效。通过点击按钮，可以显示或隐藏右侧的内容页面，支持URL链接和HTML内容。示例代码包括HTML、CSS和JS部分，提供了rightWindows函数的调用方法和参数说明。

摘要由CSDN通过智能技术生成

js实现右侧抽屉效果，点击实现右侧弹出内容页面特效，点击空白遮罩处或关闭按钮可以隐藏弹出的页面。

下面我们来看下本实例具体的演示效果：

js+css实现右侧边栏抽屉功能效果https://download.csdn.net/download/heronivy/85558284

某管理系统后台整合效果：

html部分实现代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js右侧抽屉特效，右侧弹窗特效</title>
    <link rel="stylesheet" href="static/css/style.css" media="all" />
    <link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style type="text/css">
        .test-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            border: 1px solid transparent;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border-radius: 2px;
            cursor: pointer;
        }
        .bgreg{
            background-color:#FF0000;
        }

    </style>
    <script type="text/javascript" src="static/lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="static/js/public.js?20220605"></script>
</head>
<body>
<a id="btn" onclick="btns();" class="test-btn">右侧抽屉特效（url）</a>
<a id="btn2" onclick="btns2();" class="test-btn bgreg">右侧抽屉特效（html内容）</a>

<br>请点击上面按钮
<script>
    //效果1
    function btns() {
        var urls='https://blog.csdn.net/heronivy';
        rightWindows('右侧内容特效',urls,true);
    }

    //效果2
    function btns2() {
        var urls='<a href="https://blog.csdn.net/heronivy" target="_blank">https://blog.csdn.net/heronivy</a>';
        rightWindows('右侧内容特效',urls,false);
    }

</script>
</body>
</html>

使用帮助：调用函数 rightWindows(title, content, isIframe);

参数说明：

* @param {string} title

* @param {string} content 如果isIframe=true,则为url地址

* @param {bool} isIframe

heronivy

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【js+css实现右边侧栏抽屉功能效果】

js实现右侧抽屉效果，点击实现右侧弹出内容页面特效，点击空白遮罩处或关闭按钮可以隐藏弹出的页面。下面我们来看下本实例具体的演示效果：js+css实现右侧边栏抽屉功能效果https://download.csdn.net/download/heronivy/85558284某管理系统后台整合效果： html部分实现代码使用帮助：调用函数 rightWindows(title, content, isIframe);参数说明：* @param {string} title* @param {strin
复制链接

扫一扫