JS簡易彈出層手機版


簡單說明

  手機彈出層模枋了WEIUI.彈出層原理還是依照bootstrap

  去掉了PC端的ESC關閉.點擊背景層時也不默認關閉.

模板樣子

 

 

使用示例

 var cfg = {
okEvent:
function ()
{
msgBox.close();
},
cancelEvent:
function ()
{
msgBox.close();
}
};
msgBox.show(
'tmp_id',cfg);

 

CSS樣式

/*彈出時給body加上這個,關閉時去掉*/
.overhide
{
overflow
: hidden;
}
/*關鍵樣式 遮罩層的*/
.msgboxshadow
{
position
: fixed; /*固定定位*/
left
: 0;
top
: 0;
right
: 0;
bottom
: 0;
opacity
: .5; /*背景透明度.這里沒有兼容樣式*/
background-color
: #000; /*背景色*/
z-index
: 10000; /*層級數僅小於內容彈出框*/
}
/*關鍵樣式 彈出框最外層*/
.msgboxbg
{
display
: none;
position
: fixed; /*固定定位*/
left
: 0;
top
: 0;
right
: 0;
bottom
: 0;
overflow-x
: hidden;
overflow-y
: auto;
z-index
: 10001; /*比遮罩層大1,要顯示在遮罩層上面*/
}
/*內容層默認樣式:效果是水平垂直固定定位居中*/
.msgboxcontent
{
position
: fixed;
border-radius
: 3px;
background-color
: #fff;
box-shadow
: 2px 2px 40px #000000;
top
: 50%;
left
: 50%;
width
: 75%;
max-width
:320px;
/*這三句話固定定位水平居中*/
-ms-transform
: translate(-50%,-50%);
-webkit-transform
: translate(-50%,-50%);
-moz-transform
: translate(-50%,-50%);
transform
: translate(-50%,-50%);
/**/
overflow-x
: hidden;
overflow-y
: auto;
}

/*模板樣式*/
/**共用S*/
/*****標題區*/
.titlearea
{
box-sizing
: border-box;
font-size
: 18px;
color
: #444;
}
/*****內容區*/
.contentarea
{
box-sizing
: border-box;
padding
: 10px 15px 15px 15px;
text-indent
: 5px;
font-size
: 16px;
color
: #666;
}
/*****按鈕區*/
.btnarea
{
box-sizing
: border-box;
font-size
: 0;
}
/*****按鈕*/
.btnleft, .btnright
{
box-sizing
: border-box;
display
: inline-block;
-moz-user-select
: none;
-ms-user-select
: none;
-webkit-user-select
: none;
user-select
: none;
/**/
height
: 42px;
line-height
: 42px;
font-size
: 18px;
color
: #333;
}

.btnleft:active, .btnright:active
{
background-color
: #eee;
color
: #000;
}
/*共用E*/

/*IOS模板S*/
.ios.titlearea
{
text-align
: center;
padding
: 25px 0 5px 0;
}

.ios.contentarea
{
line-height
: 1.3;
}

.ios.btnarea
{
border-top
: 1px solid #ddd;
}

.ios.btnleft, .ios.btnright
{
width
: 50%;
text-align
: center;
}

.ios.btnleft
{
border-right
: 1px solid #ddd;
}

.ios.btnleft:active, .ios.btnright:active
{
}
/*IOS模板E*/

/*安卓模板S*/
.adr.titlearea
{
padding
: 25px 0 5px 15px;
}
.adr.contentarea
{
line-height
: 1.3;
}
.adr.btnarea
{
text-align
:right;
padding-right
:30px;
}
.adr.btnleft, .adr.btnright
{
text-align
: center;
padding
:0 5px;
}
.adr.btnleft
{
margin
: 0 10px;
}
.adr.btnright
{
margin
:0 5px;
}
/*安卓模板E*/

/*模板3 S*/
.tmp3.contentarea
{
text-align
:center;
font-size
:18px;
}
.tmp3.btnarea
{
border-top
:1px solid #eee;
text-align
:center;
}
.tmp3.btnleft
{
width
:100%;
text-align
: center;
}
/*模板3 E*/

/*模板4 S*/
.tmp4.option
{
padding
:5px 0;
height
:32px;
line-height
:32px;
border-bottom
:1px solid #ddd;
}
.tmp4.option:last-child
{
border
:none;
}
.tmp4.option:active
{
background-color
:#ddd;
}
.tmp4.btnarea
{
border-top
: 1px solid #eee;
text-align
: center;
}
.tmp4.btnleft
{
width
: 100%;
text-align
: center;
}
/*模板4 E*/

/*模板5 S*/
.tmp5.titlearea
{
text-align
: center;
padding
: 20px 0 10px 0;
}
.tmp5.contentarea
{
height
:160px;
overflow-y
:auto;
}
.tmp5.option
{
padding
: 5px 0;
height
: 32px;
line-height
: 32px;
border-bottom
: 1px solid #ddd;
text-align
: center;
}

.tmp5.option:last-child
{
border
: none;
}

.tmp5.option:active
{
background-color
: #ddd;
}

.tmp5.btnarea
{
border-top
: 1px solid #eee;
text-align
: center;
}

.tmp5.btnleft
{
width
: 100%;
text-align
: center;
}
/*模板5 E*/

/*模板6S*/
.tmp6.titlearea
{
padding
: 15px 0 5px 20px;
}

.tmp6.contentarea
{

}
.tmp6input
{
display
: block;
width
: 100%;
height
: 28px;
line-height
: 28px;
border
: 1px solid #ccc;
border-radius
: 2px;
color
: #333;
font-size
: 14px;
text-indent
: 5px;
}
.tmp6input:focus
{
box-shadow
: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
border-color
: #66afe9;
outline
: 0 none;
}
.tmp6.btnarea
{
text-align
: right;
padding-right
: 30px;
}

.tmp6.btnleft, .tmp6.btnright
{
text-align
: center;
padding
: 0 5px;
}
.tmp6.btnleft
{
margin
: 0 10px;
}
.tmp6.btnright
{
margin
: 0 5px;
}
/*模板6E*/
View Code

彈出層類

// 需要引用樣式表 msgBoxM.css
//
需要引用JQuery
/*
--msgbox函數對象,相當於弄了一個類,方法都在這個函數(類)上,是靜態的--*/
function msgBox() {
}
/*****************************************/
/******************* PROPERTY ******/
/****************************************/
// public 點擊背景關閉?(bool)
msgBox.Bgclose = false;
// public 彈出和關閉動畫時間(豪秒)
msgBox.AniTime = 200;

// 彈出層顯示之前執行
msgBox.beforeEvent = null;
// public 彈出層關閉之后事執行
msgBox.closedEvent = null;
// public 確定按鈕 [role = btnok]
msgBox.okEvent = null;
// public 取消(關閉)按鈕 [role = btncancel]
msgBox.cancelEvent = null;

// 當前彈出層元素的ID(string)
msgBox.CurrentDomId = null;
/******************************************/
/******************* FUNCTION *******/
/*****************************************/
// 顯示彈出層(主要方法) tmp_id=彈出層DOM模板所在的腳本標記ID , cfg=配置JSON
msgBox.show = function (tmp_id, cfg) {
// 取出模板HTML,加上ID屬性,然后添加到body中,但不顯示
msgBox.CurrentDomId = tmp_id + '_DOM';
var dom = $('#' + tmp_id).html();
dom
= dom.replace('$id', msgBox.CurrentDomId);
$(
'#' + msgBox.CurrentDomId).remove();
$(
'body').append(dom);
//
var showboxJQ = $('#' + msgBox.CurrentDomId);
// 將配置設置到屬性
msgBox.config(cfg);
// window的寬度與高度
//var windowWidth = window.innerWidth;
//var windowHeight = window.innerHeight;
// 文檔寬度與高度
//var scrollTop = $(document).scrollTop();
//var scrollLeft = $(document).scrollLeft();
// 添加遮罩 先將body的滾動條設無,這樣遮罩范圍就限於當前窗口大小.遮罩和彈出層還須是固定定位
$('body').addClass('overhide');
$(
'body .msgboxshadow').remove();
$(
'body').append('<div class="msgboxshadow"></div>');
// 要獲得焦點,需要設定這個屬性tabindex
showboxJQ.attr('tabindex', -1);
// 顯示之前事件
if (typeof msgBox.beforeEvent === 'function')
msgBox.beforeEvent(showboxJQ);
// 顯示內容層
showboxJQ.fadeIn(msgBox.AniTime).focus();
}
// 用於配置屬性的方法,參數是JSON對象 傳入 def 則恢復到默認配置
msgBox.config = function (cfg) {
if (cfg) {
// 屬性設定
for (var n in cfg) {
if (msgBox[n] !== undefined)
msgBox[n]
= cfg[n];
}
}
// 事件綁定
msgBox.bindEvent();
}
// 將屬性重置,事件清空.但不清除當前彈出層JQ對象 不應在外部調用此法 關閉時會調用此方法
msgBox.reset = function () {
msgBox.Bgclose
= false; // 點擊背景關閉
msgBox.beforeEvent = null;
msgBox.closedEvent
= null; // 窗口關閉后執行
msgBox.okEvent = null; // 確定按鈕 [role = btnok]
msgBox.cancelEvent = null;// 取消(關閉)按鈕 [role = btncancel]
msgBox.AniTime = 200;// 動畫時間
msgBox.CurrentDomId = null;
}
// 該方法用於綁定事件:有默認事件如: 按ESC關閉,點擊背景關閉.也有指定的事件,如確定 取消
//
不應在外部調用此方法,所有屬性和事件應在CFG方法中傳入,CFG會調用此方法
msgBox.bindEvent = function () {
var showboxJQ = $('#' + msgBox.CurrentDomId);
// 默認事件綁定 點擊背景關閉
if (msgBox.Bgclose === true)
showboxJQ.on(
'click', function (event) {
if (event.target.id === msgBox.CurrentDomId) {
msgBox.close();
}
});
// 事件 但role約定為btnok(確定) btncancel(取消)
if (typeof msgBox.okEvent === 'function')
showboxJQ.find(
"[role = btnok]").one("click", function () {
msgBox.okEvent(showboxJQ);
})
if (typeof msgBox.cancelEvent === 'function')
showboxJQ.find(
"[role = btncancel]").one("click", function () {
msgBox.cancelEvent(showboxJQ);
})
}
// public 關閉對話框(確認和取消事件中如果要關閉對話框應調用此方法)
msgBox.close = function () {
var showboxJQ = $('#' + msgBox.CurrentDomId);
// 清除彈出層
showboxJQ.fadeOut(msgBox.AniTime, function () {
showboxJQ.remove();
// 還原文檔的滾動條,清除遮罩層
$('body').removeClass('overhide');
$(
'body .msgboxshadow').remove();
});
// 執行關閉后事件
if (typeof msgBox.closedEvent === 'function')
msgBox.closedEvent();
// 重置屬性
msgBox.reset();
}
// *模板腳本*///
//
// IOS模板S
function showios() {
var cfg = {
okEvent:
function ()
{
msgBox.close();
},
cancelEvent:
function ()
{
msgBox.close();
}
};
msgBox.show(
'tmp_ios',cfg);
}
// // 安卓模板
function showandroid() {
var cfg = {
okEvent:
function () {
msgBox.close();
},
cancelEvent:
function () {
msgBox.close();
}
};
msgBox.show(
'tmp_android', cfg);
}
// // 模板3
function showtmp3(msg) {
var cfg = {
cancelEvent:
function () {
msgBox.close();
},
beforeEvent:
function (sbjq) {
if(msg)
sbjq.find(
'.contentarea').eq(0).html(msg);
}
};
msgBox.show(
'tmp_3', cfg);
}
function showtmp4() {
var cfg = {
Bgclose:
true,
cancelEvent:
function () {
msgBox.close();
},
beforeEvent:
function () {
$(
'.tmp4.option').on('click', function () {
alert($(
this).html());
})
}
};
msgBox.show(
'tmp_4', cfg);}
function showtmp5() {
var cfg = {
Bgclose:
true,
cancelEvent:
function () {
msgBox.close();
},
beforeEvent:
function (sbjq) {
var months = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
var options = '';
for (var i = 0; i < months.length; i++) {
options
+= '<div class="tmp5 option">' + months[i] + '月</div>';
}
sbjq.find(
'.contentarea').eq(0).html(options);
//
$('.tmp5.option').on('click', function() {
alert($(
this).html());
})
}
};
msgBox.show(
'tmp_5', cfg);
}
function showtmp6() {
var cfg = {
okEvent:
function(sbjq) {
var input = sbjq.find('.tmp6input').eq(0).val();
alert(input);
msgBox.close();
},
cancelEvent:
function() {
msgBox.close();
},
};
msgBox.show(
'tmp_6', cfg);}
// IOS模板E
View Code

 

源代碼 https://github.com/mirrortom/msgBoxM


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com