js美化系统默认Prompt仿APP移动端弹出,可以自行修改

var BePrompt = {
    defaultConfig: {
        type: 'text',
        Desc: '',
        length: 5
    },
    Html: '<div class="Prompt"><div class="PromptTitle"><div class="PromptCancel">取消</div><div class="PromptConfirm">完成</div><em class="PromptName"></em></div><div class="PromptList"></div></div>',
    HtmlArea: '<textarea name="PromptArea" id="PromptArea" ></textarea>',
    open: function (message, defaultText, callback, o) {
        var opts = {}, that = this;
        $.extend(opts, this.defaultConfig, o);
        $('body').append(this.Html);
        message && $('.PromptName').html(message).show();
        var PromptList = $('.PromptList')

        if (opts.type == 'text') {
            PromptList.append('<input id="PromptText" name="PromptText" type="' + opts.type + '" autocomplete="off" required="required" maxlength="' + opts.length + '" placeholder="请输入' + message + '" value="' + defaultText + '" />');
        } else {
            PromptList.append('<textarea name="PromptText" id="PromptText" required="required" placeholder="' + opts.Desc + '">' + defaultText + '</textarea>');
        }
        PromptList.append('<span class="PromptLen">' + defaultText.length+'/'+ opts.length+'</span>')
        $('.Prompt').animate({ 'top': '0px', 'opacity': '1' }, 200);
        $('#PromptText').bind('keydown',
            function () {
                var text = $(this).val()
                if (text.length >= opts.length) {
                    $(this).val(text.substring(0, opts.length-1));
                } 
                $(".PromptLen").text(text.length + "/" + opts.length);
            });
        $('.PromptConfirm').bind('click',
            function () {
                that.close();
                typeof callback === 'function' && callback(true, $('#PromptText').val())
            });

        $('.PromptCancel').bind('click',
            function () {
                that.close();
                typeof callback === 'function' && callback(false)
            })
    },
    close: function () {
        $(".Prompt").animate({ 'top': '100%', 'opacity': '0' }, 300, function () {
            $(".Prompt").remove()
        })
    }
};
var _prompt = window.prompt;
window.prompt = function (message, defaultText, callback, opts) {
    if (typeof callback == 'function') {
        BePrompt.open(message, defaultText, callback, opts)
    } else { return _prompt(message, defaultText) }
};

.Prompt {
    position: fixed;
    bottom:0px;
    left: 0px;
    right:0px;
    background: #fff;
    z-index: 9991;
    opacity: 0;
}
    .Prompt .PromptTitle {
        height: 46px;
        text-align: center;
        background: #e90908;
        position: relative;
        color: #fff;
        line-height: 46px;
        font-size: 18px;
    }
    .Prompt .PromptName {
        font-weight: bold
    }
    .Prompt .PromptCancel {
        position: absolute;
        height: 46px;
        line-height: 46px;
        margin-left: 10px;
        width: 50px;
        text-align: left;
    }
    .Prompt .PromptConfirm {
        display: block;
        position: absolute;
        height: 46px;
        line-height: 46px;
        right: 0px;
        width: 50px;
        margin-left: -50px;
         text-align:left;
    }
    .Prompt .PromptList {
          margin: 20px;   position:relative
    }
    .Prompt .PromptLen {
        right: 0px;
        position: absolute;
        display: block;
        margin-top: -40px;
        line-height: 40px;
        margin-right: 10px;
    }


    .Prompt input {
        background: #efefef !important;
        width: 100%;
        border: 0px none !important;
        font-size: 16px;
        line-height: 30px;
        padding: 5px !important;
    }
    .Prompt textarea {
        background: #efefef !important;
        width: 100%;
        border: 0px none !important;
        font-size: 16px;
        line-height: 30px;
        padding: 5px !important;
        min-height: 150px;
       
    }

 采用jq美化系统Prompt提示框,仿照的app输入界面模式,整屏比下向上弹出。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值