移动端模拟alert和tip弹框

最新推荐文章于 2025-07-15 09:46:02 发布
最新推荐文章于 2025-07-15 09:46:02 发布
阅读量7.1k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript html5 文章标签： 移动端模拟alert和tip弹框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xw505501936/article/details/52043840
本文介绍了一个针对移动端项目的仿alert弹窗插件，该插件基于jQuery或Zepto开发，支持不同类型的提示框样式，并提供了多个示例说明如何使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近，移动端的项目越来越多，每个项目中都有登录注册界面等，异常提示的弹框和tip用的较多，
于是抽出点时间封装了下对应的jquery插件，和一个函数；以便项目重用性。
废话不多说，直接上代码：


1  模拟alert弹出框函数

//模拟alert弹出框函数；datetime：20160727；by：xiewei【依赖于flexible.js和jquery或者zepto】
    function malert(option) {
        var _win_w = $(window).width();
        var _name = option.name || "_zb_alert_hs_";
        var _bg_opacity = option.bg_opacity || .6;
        var _radius = option.radius || 5;
        var _unit = option.unit || "rem";
        var _w = option.width || "6"; //弹框宽度，可自行设定
        var _h = option.height || "4"; //弹框高度，可自行设定
        var _text = option.text;
        var _type = option.type;
        //弹框类型
        if(_type=='tip'){
            var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:0"></div>';
            var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:50%;left:50%;background:#000">';
            _ceng_con += '<p class="' + _name + '_p" style="color:#fff;font-size:.4rem;text-align:center;padding:0 .3rem"><span>' + _text + '</span></p>';
            _ceng_con += '</div>';
            var _res_html = _ceng_bg + _ceng_con;
            $('body').append(_res_html);
            var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
            var _ceng_con_p_span_w = $('.' + _name + '_p').children('span').width() / (_win_w / 10);
            if(_ceng_con_p_span_w + 0.6*2>=_w){
                var _ceng_con_p_w=_w-0.6*2;
            }else{
                var _ceng_con_p_w=_ceng_con_p_span_w;
            }
            $('.' + _name + '_p').css({"margin-top": 0.3 + "rem"});
            $('.' + _name + '_p').parent('div').css({"height": (_ceng_con_p_h + 0.6) + "rem","width": (_ceng_con_p_w + 0.6*2) + "rem","margin-left":-(_ceng_con_p_w + 0.6*2)/2+"rem","margin-top":-(_ceng_con_p_h + 0.6)/2+"rem"});
            setTimeout(function(){
                $('.' + _name + '_p').parent('div').prev('div').remove();
                $('.' + _name + '_p').parent('div').remove();
            },1200);
        }else{
            var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:' + _bg_opacity + '"></div>';
            var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:50%;left:50%;background:#fff">';
            _ceng_con += '<div style="width:100%;height:100%;position:relative">';
            _ceng_con += '<div style="width:100%;height:' + (_h - 1) + 'rem;padding-top:1px">';
            _ceng_con += '<p class="' + _name + '_p" style="color:#666;font-size:.4rem;text-align:center;padding:0 .5rem">' + _text + '</p>';
            _ceng_con += '</div>';
            _ceng_con += '<div style="width:100%;height:1rem;position:absolute;bottom:0;left:0;border-top:1px solid #e6e6e6">';
            _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#0e9cfa;font-size:.38rem">取消</a>';
            _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_ok_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#0e9cfa;font-size:.38rem;margin-left:-1px;border-left:1px solid #e6e6e6">确定</a>';
            _ceng_con += '</div>';
            _ceng_con += '</div>';
            _ceng_con += '</div>';
            var _res_html = _ceng_bg + _ceng_con;
            $('body').append(_res_html);
            var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
            var pingfen_top = (_h - 1 - _ceng_con_p_h) / 2
            $('.' + _name + '_p').css({"margin-top": pingfen_top + "rem"});
            $('.' + _name + '_cancle_btn').click(function () {
                $(this).parent('div').parent('div').parent('div').prev('div').remove();
                $(this).parent('div').parent('div').parent('div').remove();
                if(option.cancle){
                    option.cancle();
                }
            });
            $('.' + _name + '_ok_btn').click(function () {
                $(this).parent('div').parent('div').parent('div').prev('div').remove();
                $(this).parent('div').parent('div').parent('div').remove();
                if(option.ok){
                    option.ok();
                }
            });
        }
    }

2  模拟alert弹出框插件 

//模拟alert弹出框插件；datetime：20160727；by：xiewei【依赖于flexible.js和jquery】
    $.extend({
        malert: function (option) {
            var _win_w = $(window).width();
            var _name = option.name || "_zb_alert_hs_";
            var _bg_opacity = option.bg_opacity || .5;
            var _radius = option.radius || 5;
            var _unit = option.unit || "rem"; //以移动端rem为单位
            var _w = option.width || "6";
            var _h = option.height || "4";
            var _text = option.text;
            var _type = option.type;
            //弹框类型
            if(_type=='tip'){
                var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:0"></div>';
                var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:50%;left:50%;background:#000">';
                _ceng_con += '<p class="' + _name + '_p" style="color:#fff;font-size:.4rem;text-align:center;padding:0 .3rem"><span>' + _text + '</span></p>';
                _ceng_con += '</div>';
                var _res_html = _ceng_bg + _ceng_con;
                $('body').append(_res_html);
                var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
                var _ceng_con_p_span_w = $('.' + _name + '_p').children('span').width() / (_win_w / 10);
                if(_ceng_con_p_span_w + 0.6*2>=_w){
                    var _ceng_con_p_w=_w-0.6*2;
                }else{
                    var _ceng_con_p_w=_ceng_con_p_span_w;
                }
                $('.' + _name + '_p').css({"margin-top": 0.3 + "rem"});
                $('.' + _name + '_p').parent('div').css({"height": (_ceng_con_p_h + 0.6) + "rem","width": (_ceng_con_p_w + 0.6*2) + "rem","margin-left":-(_ceng_con_p_w + 0.6*2)/2+"rem","margin-top":-(_ceng_con_p_h + 0.6)/2+"rem"});
                setTimeout(function(){
                    $('.' + _name + '_p').parent('div').prev('div').remove();
                    $('.' + _name + '_p').parent('div').remove();
                },1200);
            }else{
                var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:' + _bg_opacity + '"></div>';
                var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:50%;left:50%;background:#fff">';
                _ceng_con += '<div style="width:100%;height:100%;position:relative">';
                _ceng_con += '<div style="width:100%;height:' + (_h - 1) + 'rem;padding-top:1px">';
                _ceng_con += '<p class="' + _name + '_p" style="color:#666;font-size:.4rem;text-align:center;padding:0 .5rem">' + _text + '</p>';
                _ceng_con += '</div>';
                _ceng_con += '<div style="width:100%;height:1rem;position:absolute;bottom:0;left:0;border-top:1px solid #e6e6e6">';
                _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#0e9cfa;font-size:.38rem">取消</a>';
                _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_ok_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#0e9cfa;font-size:.38rem;margin-left:-1px;border-left:1px solid #e6e6e6">确定</a>';
                _ceng_con += '</div>';
                _ceng_con += '</div>';
                _ceng_con += '</div>';
                var _res_html = _ceng_bg + _ceng_con;
                $('body').append(_res_html);
                var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
                var pingfen_top = (_h - 1 - _ceng_con_p_h) / 2;
                $('.' + _name + '_p').css({"margin-top": pingfen_top + "rem"});
                $('.' + _name + '_cancle_btn').click(function () {
                    $(this).parent('div').parent('div').parent('div').prev('div').remove();
                    $(this).parent('div').parent('div').parent('div').remove();
                    if(option.cancle){
                        option.cancle();
                    }
                });
                $('.' + _name + '_ok_btn').click(function () {
                    $(this).parent('div').parent('div').parent('div').prev('div').remove();
                    $(this).parent('div').parent('div').parent('div').remove();
                    if(option.ok){
                        option.ok();
                    }
                });
            }
        }
    });


3  可直接用于项目中插件malert.js（增加了_type=='tip02' 皮肤）

/*
 * 移动端仿alert弹框 0.1.0
 * Date: 2016-08-08
 * by: xiewei
 * 模拟移动端alert弹出框插件【依赖于flexible.js和jquery或者zepto】
 */
(function($){
    $.malert=function (option) {
        var _win_w = $(window).width();
        var _name = option.name || "_zb_alert_hs_";
        var _bg_opacity = option.bg_opacity || .5;
        var _radius = option.radius || 5;
        var _unit = option.unit || "rem"; //以移动端rem为单位
        var _w = option.width || "6";
        var _h = option.height || "4";
        var _text = option.text;
        var _type = option.type;
        var _buttons = option.buttons;
        //弹框类型
        if(_type=='tip'){
            var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:0"></div>';
            var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:44%;left:50%;background:#222;opacity:0.9">';
            _ceng_con += '<p class="' + _name + '_p" style="color:#fff;font-size:.45rem;text-align:center;padding:0 .3rem"><span>' + _text + '</span></p>';
            _ceng_con += '</div>';
            var _res_html = _ceng_bg + _ceng_con;
            $('body').append(_res_html);
            var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
            var _ceng_con_p_span_w = $('.' + _name + '_p').children('span').width() / (_win_w / 10);
            if(_ceng_con_p_span_w + 0.6*2>=_w){
                var _ceng_con_p_w=_w-0.6*2;
            }else{
                var _ceng_con_p_w=_ceng_con_p_span_w;
            }
            $('.' + _name + '_p').css({"margin-top": 0.8 + "rem"});
            $('.' + _name + '_p').parent('div').css({"height": (_ceng_con_p_h + 1.6) + "rem","width": (_ceng_con_p_w + 0.6*2) + "rem","margin-left":-(_ceng_con_p_w + 0.6*2)/2+"rem","margin-top":-(_ceng_con_p_h + 0.6)/2+"rem"});
            setTimeout(function(){
                $('.' + _name + '_p').parent('div').prev('div').remove();
                $('.' + _name + '_p').parent('div').remove();
            },1200);
        }else if(_type=='tip02'){
            var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:' + _bg_opacity + '"></div>';
            var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:50%;left:50%;background:#fff">';
            _ceng_con += '<div style="width:100%;height:100%;position:relative">';
            _ceng_con += '<div style="width:100%;height:' + (_h - 1.35) + 'rem;padding-top:1px">';
            _ceng_con += '<p class="' + _name + '_p" style="color:#666;font-size:.4rem;text-align:center;padding:0 .5rem">' + _text + '</p>';
            _ceng_con += '</div>';
            _ceng_con += '<div style="width:100%;height:1rem;position:absolute;bottom:.35rem;left:0">';
            if(_buttons){
                if(_buttons.length<2){
                    _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;margin:0 .35rem;border-radius:4px;text-align:center;line-height:1rem;background:#73d13a;color:#fff;font-size:.38rem">'+_buttons[0]+'</a>';
                }else{
                    _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:'+(_w-1.05)/2+'rem;text-align:center;line-height:1rem;background:#73d13a;color:#fff;font-size:.38rem;margin:0 .35rem 0 .35rem;border-radius:4px">'+_buttons[0]+'</a>';
                    _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_ok_btn" style="display:block;height:1rem;float:left;width:'+(_w-1.05)/2+'rem;text-align:center;line-height:1rem;background:#73d13a;color:#fff;font-size:.38rem;border-radius:4px">'+_buttons[1]+'</a>';
                }
            }else{
                _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:'+(_w-1.05)/2+'rem;text-align:center;line-height:1rem;background:#73d13a;color:#fff;font-size:.38rem;margin:0 .35rem 0 .35rem;border-radius:4px">取消</a>';
                _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_ok_btn" style="display:block;height:1rem;float:left;width:'+(_w-1.05)/2+'rem;text-align:center;line-height:1rem;background:#73d13a;color:#fff;font-size:.38rem;border-radius:4px">确定</a>';
            }
            _ceng_con += '</div>';
            _ceng_con += '</div>';
            _ceng_con += '</div>';
            var _res_html = _ceng_bg + _ceng_con;
            $('body').append(_res_html);
            var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
            var pingfen_top = (_h - 1 - _ceng_con_p_h) / 2;
            $('.' + _name + '_p').css({"margin-top": pingfen_top + "rem"});
            $('.' + _name + '_cancle_btn').click(function () {
                $(this).parent('div').parent('div').parent('div').prev('div').remove();
                $(this).parent('div').parent('div').parent('div').remove();
                if(option.cancle){
                    option.cancle();
                }
            });
            $('.' + _name + '_ok_btn').click(function () {
                $(this).parent('div').parent('div').parent('div').prev('div').remove();
                $(this).parent('div').parent('div').parent('div').remove();
                if(option.ok){
                    option.ok();
                }
            });
        }else{
            var _ceng_bg = '<div style="width:100%;height:100%;position:fixed;top:0;left:0;background:#000;opacity:' + _bg_opacity + '"></div>';
            var _ceng_con = '<div style="width:' + _w + _unit + ';height:' + _h + _unit + ';margin:' + (-_h / 2) + _unit + ' 0 0 ' + (-_w / 2) + _unit + ';border-radius:' + _radius + 'px;position:fixed;top:50%;left:50%;background:#fff">';
            _ceng_con += '<div style="width:100%;height:100%;position:relative">';
            _ceng_con += '<div style="width:100%;height:' + (_h - 1) + 'rem;padding-top:1px">';
            _ceng_con += '<p class="' + _name + '_p" style="color:#666;font-size:.4rem;text-align:center;padding:0 .5rem">' + _text + '</p>';
            _ceng_con += '</div>';
            _ceng_con += '<div style="width:100%;height:1rem;position:absolute;bottom:0;left:0;border-top:1px solid #e6e6e6">';
            if(_buttons){
                if(_buttons.length<2){
                    _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:100%;text-align:center;line-height:1rem;color:#73d13a;font-size:.38rem">'+_buttons[0]+'</a>';
                }else{
                    _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#73d13a;font-size:.38rem">'+_buttons[0]+'</a>';
                    _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_ok_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#73d13a;font-size:.38rem;margin-left:-1px;border-left:1px solid #e6e6e6">'+_buttons[1]+'</a>';
                }
            }else{
                _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_cancle_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#73d13a;font-size:.38rem">取消</a>';
                _ceng_con += '<a href="javascript:void(0)" class="' + _name + '_ok_btn" style="display:block;height:1rem;float:left;width:50%;text-align:center;line-height:1rem;color:#73d13a;font-size:.38rem;margin-left:-1px;border-left:1px solid #e6e6e6">确定</a>';
            }
            _ceng_con += '</div>';
            _ceng_con += '</div>';
            _ceng_con += '</div>';
            var _res_html = _ceng_bg + _ceng_con;
            $('body').append(_res_html);
            var _ceng_con_p_h = $('.' + _name + '_p').height() / (_win_w / 10);
            var pingfen_top = (_h - 1 - _ceng_con_p_h) / 2;
            $('.' + _name + '_p').css({"margin-top": pingfen_top + "rem"});
            $('.' + _name + '_cancle_btn').click(function () {
                $(this).parent('div').parent('div').parent('div').prev('div').remove();
                $(this).parent('div').parent('div').parent('div').remove();
                if(option.cancle){
                    option.cancle();
                }
            });
            $('.' + _name + '_ok_btn').click(function () {
                $(this).parent('div').parent('div').parent('div').prev('div').remove();
                $(this).parent('div').parent('div').parent('div').remove();
                if(option.ok){
                    option.ok();
                }
            });
        }
    }
})(jQuery);



调用方式：

$(function () {
        //示例1
        $('.button').click(function(){
            $.malert({
                text: "您确定要退出吗？",
                cancle: function () {
                    console.log('关闭了')
                },
                ok: function () {
                    console.log('确定了')
                }
            });
        });
        //示例2
        $('.button02').click(function(){
            malert({
                text: "您确定要退出吗？",
                cancle: function () {
                    console.log('关闭了')
                },
                ok: function () {
                    console.log('确定了')
                }
            })
        });
        //示例3
        $('.button03').click(function(){
            $.malert({
                type:'tip',
                text: "请您输入用户名"
            });
            //malert({
            //   type:'tip',
            //  text: "请您输入用户名"
            //});
        });
    });



对应截图如下：


_type=='tip02' 皮肤如下：



引用名言：时间就像海绵里的水,只要愿挤,总还是有的。


layer-mobile下载，layui移动端弹框插件，layer兼容移动端弹框插件，layer Web端和移动端冲突问题解决
weixin_43992507的博客
01-04 7365
效果图 layui的layer电脑端的和移动端的layer做了修改可以同一个页面使用 移动端 web端
autojs遍历当前页面所有控件_移动端控件（一）-弹窗（Alert/Dialog）
weixin_39524247的博客
11-20 3165
什么是弹窗？（注：本文所说的“弹窗”仅指Alert 和 Dialog，不包含Actionbar、Toast、Snackbar、Popover）官方解释：Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. —— htt...
JavaScript移动端模拟alert()方法
Herbert的专栏
09-09 7879
在移动端HTML5页面中，由于alert(）这个原生方法弹出框不太好看，且在各浏览器或WebView的样子不统一，我们一般会自行实现一个模拟该方法的弹出框。而且这个是一个使用频繁的方法，所以可以用JavaScript把它封装起来，便于调用。
移动端：APP弹窗设计
最新发布
WGzhuiri的博客
07-15 851
要求用户操作或反馈，且其出现在屏幕中央，对内容遮挡严重，会中断用户正常操作。Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择，Acionbar一般都设计有一个默认的“取消”功能按钮，点击该按钮后关闭弹窗，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。这么多类型的弹窗在使用中很容易混乱，滥用的弹窗会渐渐导致用户认知疲劳和视觉失调，甚至会出现“习惯性取消”等行为，得不偿失，给用户带来更多困扰，那这期内容，我们就一起来探讨一下弹窗的设计和交互。
移动端页面弹出对话框效果Demo
OrangeJ
07-24 1万+
核心思路：设置一个隐藏的(display:none;)、背景偏暗的div及其子div作为对话框，当点击某处时，将此div设置为显示。 核心代码如下(部分js代码用于动态调整div内容的行高，这部分代码可以忽略): function getHeight(className) {
移动端（H5）弹框组件--简单--实用--不依赖jQuery
weixin_30779691的博客
02-25 1297
俗话说的好，框架是服务与大家的，包含的功能比较多，代码多。在现在追求速度的年代。应该根据自己的需求去封装自己所需要的组件。 下边就给大家介绍一下自己封装的一个小弹框组件，不依赖与jQuery，代码少，适用于一般移动端小项目。 这个插件名称：MobileUi 包含功能：弹框，正在加载，tips1.5秒消失，清除正在加载。 如图： 接下来我来告诉大家怎么用吧！！ 第一步：配置&lt...
整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好...
weixin_30760895的博客
10-22 448
效果图： 我的代码示例： <!--提示模态框--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document">...
页面中最常用的弹框。自适应。适合移动端。
WEB_HW
01-12 1万+
我们经常会很头疼如何实现一个对象自然的居中。正好显示在窗口的中间部分。我也是刚刚好好研究了一份。才发现这其中的奥妙。顿时觉得豁然开朗。 前提1：我们讨论的是当弹框的宽度为百分比，高度根据内容自适应，条件下。（我想大家肯定是先想了解这种情况下的内容） 思路：其实我们要想实现居中的效果，无非最主要的就是获得弹框定位的左边。我们的弹框一般是相对定位。那么我们如何获得弹框的left和top值呢。那么我们
手机端弹出提示框，最好用的移动端提示框SweetAlert 插件
热门推荐
飞鸟的博客
12-08 2万+
更多 http://blog.youkuaiyun.com/qq_33556185/article/details/50612270
基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.youkuaiyun.com/download/cometwo/9437895）
uffgfbft的博客
11-03 3059
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&a
移动端使用alert/confirm弹出域名
Alidayu
03-29 1607
最近在移动端测试window.confirm弹框时发现提示信息上多了一行域名，影响用户体验。解决方案：1、重写alert/confirm方法，建议放到通用的js中一劳永逸        var wAlert = window.alert;            window.alert = function (message) {                try {             ...
jquery.mobile-alert:移动端的弹出框，简洁，明了，使用简单，具有CSS3动画，以后会考虑扩充更多动画
05-19
jquery.mobile-alert 移动端的弹出框，简洁，明了，使用简单，具有CSS3动画，以后会考虑扩充更多动画 示例代码中有使用方式，有两种使用方式： 1，直接$.hyc.ui.alert('提示框内容'); 会自动打开一个带有确定按钮的对话框，如果需要点击确定之后回调，直接添加第二个参数为回调函数即可 $.hyc.ui.alert('提示框内容',function(){}); 2，需要多个不同按钮 $.hyc.ui.alert({ content:'恭喜您注册成功！', buttons:[{ name:'确定',//按钮文字 id:'confirmBtn',//按钮id 方便添加自定义事件 color:'#fff',//字体颜色 bgColor:'#337AB7',//按钮背景色 callback:function(){//点击按钮回调函数 alert('确定'); }, clo
移动端弹窗(提示框)(绝对可以使用)
08-30
在网上找了很多插件,基本上都有些问题无法使用,这个也是在我们前端妹妹那要来的之前也是有点问题,当是经过修改可以使用了.里面有demo,比较简洁,文件小,
js 仿安卓弹框
chose_DoIt的博客
04-09 230
//自定义弹框 function toast(msg) { var duration = 2000; duration = isNaN(duration) ? 3000 : duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText = "width...
手机端简单js点击实现上滑弹框的原生app效果
qq_23244029的博客
06-25 1112
这个反正我也不知道怎么起名字，首先上效果图哈哈哈 嗯，就是这么简单的一个东西哈哈。下面上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-...
移动端常用alert、confirm、toast等弹窗插件，兼容 jQuery/Zepto
weixin_34199405的博客
11-13 1156
移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。 特性 支持常见的 alert、confirm、toast、notice 四种类型弹窗 可选择使用 IOS 或者 Material Design 风格的弹窗 可自定义按钮的文字、样式、回调函数，支...
vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
weixin_42327743的博客
01-30 1814
GIF.gif前言最近在做移动端的项目，需要制作移动端的alert弹框和message-box提示信息；之前使用Vue框架的element-ui时，就记得element-ui的弹框，今天深入的研究了一下源码，然后简单制作了一点小demo用到的知识点Vue组件的定义，Vue的extendVue.extend(options)options参数是一个对象，一个Vue组件配置项的对象，例如// 创建一个...
html5页面移动端点击按钮出现弹出框并且出现全屏遮罩层时 禁止页面滑动，适配安卓和ios
@Grapefruit的博客
05-02 4921
多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) 之前小柚子写了一个项目，没有用任何的UI组件库，所以当遇到了一个点击上传按钮时需要出现弹框并出现蒙层禁止滑动时遇到了一点点的小问题。本来小柚子是这样写的 var mo = function(e) { e.preventDefault() }; document.bo...
vue弹出alert_基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.
weixin_29938067的博客
12-23 525
wc-messagebox基于 vue 2.0 开发的插件包含 Alert, Confirm, Toast, Prompt仿照 iOS 原生UI(样式来源: MUI)一些想法刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入.Vue 的组件开发实际上比较简单...
移动端解决长按图片文字出现弹框解决方案
m0_63853518的博客
01-12 768
思路：把两个div放在同一个父级下面，同级状态，图片层为下方，如果为img形式改为背景图片即可，在背景图片加pointer-events。1，安卓长按图片弹出弹框使用pointer-events属性解决。2，ios移动端长按图片文字弹出复制弹框解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值