侧边滑出弹窗插件mSlider.js (原创)

所属分类:UI,导航-弹出层,其他导航

 41457  448  查看评论 (17)
分享到微信朋友圈
X
侧边滑出弹窗插件mSlider.js (原创) ie兼容9

侧滑弹层插件--mSlider.js

用法:

引入mSlider.js

<script src="mSlider.js"></script>

new一个实例:

var demo = new mSlider({dom: "#xxxx"})

绑定方法:

demo.open()

参数:

属性说明举例
dom容器节点(必填)如:"#xxx" 、 ".xxx"
distance弹层宽度(选填,默认"60%")支持:px|%|auto
time自动关闭时间(选填,默认不关闭)单位毫秒,如"2000"
zIndex层级(选填,默认100)
direction弹出方向(选填,默认"left")"left":从左弹出,"right":从右弹出,"top":从上弹出,"bottom":从下弹出
maskClose点击遮罩关闭弹层(选填,默认true)
callback关闭时回调函数

方法:

方法名说明举例
.open()打开弹窗如:xxx.open()
.close()关闭弹窗如:xxx.close()
相关插件-弹出层,其他导航

jquery弹出框插件dialogbox

jquery弹出框插件dialogbox
  弹出层
 54169  317

表格鼠标移入同行同列变色(原创)

jQuery表格鼠标移入后同行同列变色
  弹出层
 27610  320

带动画效果jQuery+CSS3实现的弹出框弹出层效果

带动画效果jQuery+CSS3实现的弹出框弹出层效果
  弹出层
 90403  454

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 32893  392

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ふL先生? 0
    2019/6/27 12:01:29
    为毛不可以吧弹出框设置圆角呢
    回复
    The Wayshower 0
    2019/3/6 9:54:35
    有没有ajax版的? 回复
    a294228566 0
    2019/2/13 22:47:19
    就没有中间的弹出框吗
    回复
    大大大悟空。 0
    2019/1/24 10:45:02
    怎么阻止弹出窗之后body不滑动 回复
    rxpnc331 0
    2018/12/14 13:01:09
    请问 “点开层后再次通过按下按钮关闭层” 要怎么实现? 因为把按钮固定在了屏幕底端,点开层之后按钮不会被遮盖,所以需要按钮有个关闭的功能。望赐教。
        jie40380
        2018/12/15 14:32:28
        生成的实例上有close()方法可以关闭。
    回复
    戒Sè 0
    2018/12/11 18:13:57
    求问 引用js后会提示addEventListener is not a function,怎么解?
        jie40381
        2018/12/11 18:21:24
        addEventListener有兼容问题,兼容IE的话要配合使用attachEvent。
        demo中只简单使用了addEventListener。
        我记得插件里我作了兼容。
    回复
    梨花妹妹 0
    2018/12/3 11:47:42
    IE8下会错位吗
        jie40380
        2018/12/3 11:49:09
        理论上说,不支持IE8。
    回复
    15201633214 0
    2018/10/28 21:15:01
    弹出层内容过多怎么滑动啊,而且往下滑并不是弹出层再往下滑动,是被遮盖住的内容往下滑动
        jie40380
        2018/11/16 14:06:35
        内容区域滚动,请单独添加overflow-y:auto属性。
        Heart Time0
        2020/4/20 12:23:20

        你好,我设置了overflow-y:auto属性。不好用啊

        <div class="wrap">
            <div class="layer-bottom">
                <div class="tab-panel-item tab-active" id="datalist" style="overflow-y:auto">
                    <a href="javascript:;" class="jq22-flex" v-for="(data,index) in jifenlist" :key="data.id">
                        <div class="jq22-price-nub">
                            <div class="jq22-digit">
                                <h2><em>¥</em>{{data.money}}</h2>
                            </div>
                            <div class="jq22-full">
                                无门槛
        
                            </div>
                        </div>
                        <div class="jq22-flex-box">
                            <h2>{{data.titile}}</h2>
                            <h3>{{data.startime}}~{{data.endtime}}</h3>
                            <button @click="gobuy(data)">立即领取</button>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    回复
    你以为 0
    2018/10/24 16:23:50
    高度怎么设置
        jie40380
        2018/11/16 14:05:06
        可设置distance 参数(单位px|%|auto)
    回复
    离心丶 0
    2018/8/30 11:12:27
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复