移动端模拟alert和tip弹框
最近，移动端的项目越来越多，每个项目中都有登录注册界面等，异常提示的弹框和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' 皮肤如下：
引用名言：时间就像海绵里的水,只要愿挤,总还是有的。
赞一个！