jsp页面div靠边隐藏和渐进式弹出纯cssjs页面写法

style文件

<style>
    #volet_clos {position: fixed;top: 60%; left: 0;width: 100%;}
    #volet {padding: 10px;background: #6B9A49; color: #fff;width: 100%;height:350px;}
    /* 初始定位 */
    #volet {position: absolute;left: 0px;top: 375px;transition: all .5s ease-in;}
    #volet a.ouvrir,#volet a.fermer {position: absolute;right: -88px;top: 150px;}
    /* 点击过后改变 target  */
    #volet a.fermer {display: none;}
    #volet:target {left: 0px;top: 10px;}
    #volet:target a.fermer {display: block;}
    #volet:target a.ouvrir {display: none;}
    #volet_clos:target #volet {left: 0px;top: 375px;}
    #volet a.ouvrir,#volet a.fermer{position: absolute;right: calc(40%);top: -40px;padding: 10px 25px; background: #555; color: #fff; text-decoration: none;text-align: center; width: 120px;}
</style>

div文件，放置在需要该功能页面最下方

<div id="volet_clos">
        <div id="volet">
            <p>1111111</p>
            <p>2222222</p>
            <p>33333333</p>
            <p>44444444</p>
            <p>555555555</p>

            <a href="#volet"  aria-hidden="true" class="ouvrir">滑出</a>
            <a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
        </div>
    </div>

js文件，可调用实现点击行或者其他弹出,需给对应a标签指定id

$('#open')[0].click();
$('#colse')[0].click();

弹出关闭效果图


大小都可以在style里自己调整

不懂留言 end