h5滑动模态框适用移动端

所属分类:UI-弹出层,工具提示

 30146  340  查看评论 (31)
分享到微信朋友圈
X
h5滑动模态框适用移动端 ie兼容9

更新时间:2019-04-04 20:55:57

更新说明: 改进提示浮层的功能使其可以一直显示,添加手动关闭提示浮层的方法


更新时间:2019-02-16 21:40:12

更新说明:

1.添加了 shadeClose 选项,为false 的时候表示点击黑色蒙版不会关闭模态框,此时关闭需要调用 实例下的close方法

2. 当提示消息正在展示,再次提示消息,则马上关闭旧消息,不会等时间到才关闭

3. 修改了当模态框组合调用时会产生死循环的bug


更新时间:2019/1/20 下午11:29:10

更新说明:
1.  修正了,当页面有滚动条时,关闭浮层后,滚动条自动回到顶部的bug
2.  修正了,iphone6 safari 浏览器 提示消息不能弹出的bug


使用方法

1. 需引入

<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="slideAlert.js"></script>

2. 用法如下:

html:

<!--模态框内容-->
<script id="J-top" type="text/html">
    <p style="height: 1000px;">我是从上面滑出的模态框</p>
    </script>
<script id="J-bottom" type="text/html">
    <p style="height: 1000px;">我是从下面滑出的模态框</p>
</script>
<script id="J-left" type="text/html">
    <div class="sd-demo-content">
        <p style="height: 1000px;">我是从左面滑出的模态框</p>
    </div>

    <div class="bottom_buttons">
        <a href="">取消</a>
        <a href="">确认</a>
    </div>
</script>

js:

var instance = $('your dom id').slideAlert({
    // jquery 对象
    "element": null,
    // 可填的参数是 top,bottom,left,right,alert,tips
    "type": "bottom",
    // 模态框中的内容
    "content": $('#"J-left').html(),
    // 类型为tips时,自动关闭时间
    "time": '1500',
    // 打开alert 前调用
    "beforeOpen": function() {},
    // 打开alert 后调用,常用于绑定模态框里面元素的事件
    "afterOpen": function() {},
    // 关闭前调用
    "beforeClose": function() {},
    // 关闭 alert 之后调用
    "afterClose": function() {}
});

此时 instance 实例有能调用两个函数:

// 全部销毁
instance.destroy()
// 关闭modal
instance.close()
相关插件-弹出层,工具提示

四种简单弹窗 — 自己配置弹窗

四种弹出方式,可以非常简单的通过修改css来定义自己喜欢的样式。
  弹出层
 53167  423

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 33379  387

jQuery弹出层插件gallery

这是一个图片弹出层
  弹出层
 39076  348

一款简单实用的弹窗插件JMask(原创)

JMask是一款遮罩插件,其小巧灵活,在项目开发中方便实用。使用方式也特别简单,只需要引入一个js文件,该插件基于JQuery开发,所以使用之前需要引入JQuery文件。
  弹出层
 39123  361

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

    SunJim 0
    2019/7/23 14:53:56

    你好问一下

    beforeOpen: function() {
        console.log('before open callback');
        document.getElementById('result').innerHTML == "bbbbb";
    },

     这里面为啥改变不了P标签里面的内容啊

    <script id="J-alert" type="text/html">
        <div class="mark">
            <div class=" container">
                <p style="text-align: center">恭喜你抽中了
                    <p d="result" style="text-align: center; color: #ff6c8c; font-size: 20px; font-weight: bold">500元优惠券
                        <div class="commit-bg">
                            <button id="commit-btn" class="commit-btn" onclick="javascript:commit_action">确认提交</button>
                        </div>
            </div>
            <img id="close-alert" src="<%=request.getContextPath()%>/unicorn_aged/activities/luck/img/close_btn.png" class="close-btn">
        </div>
    </script>
        慕牧木0
        2019/7/23 15:13:46
        用afterOpen试试呗
    回复
    感应 0
    2019/7/17 10:22:07
    麻烦问一下,弹出层如何加入关闭按钮呢?还有,如果同一页面有两个以上的弹出层弹框,且内容不同,该怎么设置?谢谢
        慕牧木1
        2019/7/17 10:41:07
        1. 弹窗右侧加个 "x" 绑定事件,然后手动调关闭弹窗的方法就行了
        2. 我这个就是个简单弹窗,不支持多层欠套的
    回复
    ふL先生? 0
    2019/6/26 15:07:46
    弹出层的高度怎么调啊,大佬
        慕牧木0
        2019/7/17 10:37:04
        覆盖css样式就行了
    回复
    SunJim 0
    2019/6/26 9:21:01
    麻烦问一下 你的这个组件怎么能让他自动弹出来呢 而不是手动去调 就是一个定时任务结束了直接弹出来那种的
        慕牧木0
        2019/6/26 9:34:56
        你可以把这个封装到一个方法里,定时器完事了直接调方法不就行了
        SunJim0
        2019/6/26 9:53:16
        function showResult(index) {
            // alert('恭喜你中了第'+ index +'个')
            var instance = null;
            $('#luck').delegate('.cjBtn', 'auto', function(e) {
                var type = $(this).attr('data-type');
                instance = $(this).slideAlert({
                    type: type,
                    content: $('#J-' + type).html(),
                    beforeOpen: function() {
                        console.log('before open callback');
                    },
                    afterClose: function() {
                        console.log('after close callback');
                    },
                    afterOpen: function() {
                        console.log('after open callback');
                    },
                    shadeClose: true,
                    time: $(this).attr('data-time')
                });
            });
            $('#J-close-tips').on('click', function(e) {
                instance.closeTips()
            })
        }

        我是封到方法里了 但是怎么都不出来

        SunJim0
        2019/6/26 9:54:20
        <div id="bottom" class="bottomBg">
            <div class="shanDeng" id="deng">
                <div id="luck">
                    <!-- luck -->
                    <table>
                        <tr>
                            <td class="luck-unit luck-unit-0"><img src="./img/1.png" class="prize"></td>
                            <td class="luck-unit luck-unit-1"><img src="./img/2.png" class="prize"></td>
                            <td class="luck-unit luck-unit-2"><img src="./img/3.png" class="prize"></td>
                        </tr>
                        <tr>
                            <td class="luck-unit luck-unit-7"><img src="./img/6.png" class="prize"></td>
                            <td class="cjBtn" id="btn" data-type="alert"></td>
                            <td class="luck-unit luck-unit-3"><img src="./img/5.png" class="prize"></td>
                        </tr>
                        <tr>
                            <td class="luck-unit luck-unit-6"><img src="./img/3.png" class="prize"></td>
                            <td class="luck-unit luck-unit-5"><img src="./img/4.png" class="prize"></td>
                            <td class="luck-unit luck-unit-4"><img src="./img/8.png" class="prize"></td>
                        </tr>
                    </table>
                </div>
                <!-- luckEnd -->
            </div>
        </div>
        慕牧木1
        2019/6/26 10:32:50
        function showResult(index) {
            // alert('恭喜你中了第'+ index +'个')
            var instance = $(this).slideAlert({
                type: type,
                content: $el.html(),
                beforeOpen: function() {
                    console.log('before open callback');
                },
                afterClose: function() {
                    console.log('after close callback');
                },
                afterOpen: function() {
                    console.log('after open callback');
                },
                shadeClose: true,
                time: $(this).attr('data-time')
            });
        }

        这样写调方法就能出来了

        慕牧木0
        2019/6/26 10:43:13
        或者用trigger也行
        SunJim0
        2019/6/26 13:14:47
        3q 已经可以了
    回复
    SunJim 0
    2019/6/12 13:13:58
    宽高要是能设置就完美了
        慕牧木1
        2019/6/12 13:35:20
        浮层容器的id是这个:J-jq-sd-alert, 您可以在beforeOpen 里为容器加一个您自己的css类,然后覆盖样式就可以了。
        SunJim0
        2019/6/12 13:44:28
        ok 我试试 多谢大神指导 我是个小白
    回复
    SunJim 0
    2019/6/11 9:52:34
    弹框弹出来之后 下面的列表还可以滑动
        SunJim1
        2019/6/11 10:06:50

        afterOpen 里面加上这个就好了。

        document.documentElement.style.overflow='hidden';
        document.body.style.overflow='hidden';//手机版设置这个。
    回复
    SunJim 0
    2019/6/10 16:50:17
    prizeList.html?_ijt=8dv5qkqj6glpp633q0jqrbs64a:127 Uncaught TypeError: $(...).slideAlert is not a function
        at HTMLButtonElement.<anonymous> (prizeList.html?_ijt=8dv5qkqj6glpp633q0jqrbs64a:127)
        at HTMLDivElement.l (zepto.min.js:2)
        at HTMLDivElement.a.proxy (zepto.min.js:2)

    咋回事啊这是

        慕牧木0
        2019/6/10 16:55:52
        您确定引入顺序是正确的吗,先是zepto.js 然后是 slideAlert.js 然后是 你自己的js
        SunJim0
        2019/6/10 17:07:17
        3q解决了 就是引入顺序的事
    回复
    a294228566 0
    2019/2/15 1:34:39
    请问能不能不自动关闭?
        慕牧木0
        2019/2/15 15:05:52
        添加了 点击黑色蒙版不自动关闭 的选项,不清楚是不是你说的 不自动关闭 ,等版本更新了以后你可以看下
        a2942285660
        2019/2/16 0:03:35
        你说这个也是我想要的,不过我一开始想说的是,能不能不要定时关闭tip?等我自己调用close才关闭
        慕牧木0
        2019/4/8 12:52:37
        一直显示的话传 time:0 , 手动关闭加了个 closeTips 方法
    回复
    I Want My Tears Back 0
    2019/1/17 17:40:16
    你这个有一个BUG,就是移动端我输入框,验证后不对,然后用你的提示框。但是如果有滚动条他会把滚动条清除并且回到顶部
        慕牧木0
        2019/1/18 12:41:20
        已经修复,等审核通过就行了
    回复
    - 0
    2018/12/21 17:04:27
    如何引用一个 链接呢? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复