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输入界面模式,整屏比下向上弹出。