JS簡易彈出層手機版

阿新 • • 發佈：2017-09-18

splay otto 內容標題 tle 高度原理 -1 靜態

簡單說明

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

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

模板樣子

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

模板

<script type="text/html" id="tmp_ios">
        <div class="msgboxbg" id="$id">
            <div class="msgboxcontent">
                <div class="ios titlearea"><strong>模仿IOS彈出框</strong></div>
                <div class="ios contentarea">自定義內容區,內容描述應簡潔明了直達要領!</div>
                <div class="ios btnarea">
                    <span class="ios btnleft" role="btncancel">取消</span>
                    <span class="ios btnright" role="btnok">確定</span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="tmp_android">
        <div class="msgboxbg" id="$id">
            <div class="msgboxcontent">
                <div class="adr titlearea"><strong>模仿安卓彈出框</strong></div>
                <div class="adr contentarea">自定義內容區,內容描述應簡潔明了直達要領!</div>
                <div class="adr btnarea">
                    <span class="adr btnleft" role="btncancel">取消</span>
                    <span class="adr btnright" role="btnok">確定</span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="tmp_3">
        <div class="msgboxbg" id="$id">
            <div class="msgboxcontent">
                <div class="tmp3 contentarea">模板3,無標題,內容只一行!</div>
                <div class="tmp3 btnarea">
                    <span class="tmp3 btnleft" role="btncancel">取消</span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="tmp_4">
        <div class="msgboxbg" id="$id">
            <div class="msgboxcontent">
                <div class="tmp4 contentarea">
                    <div class="tmp4 option">模板4,選擇項目1</div>
                    <div class="tmp4 option">模板4,選擇項目2</div>
                    <div class="tmp4 option">模板4,選擇項目3</div>
                    <div class="tmp4 option">模板4,選擇項目4</div>
                </div>
                <div class="tmp4 btnarea">
                    <span class="tmp4 btnleft" role="btncancel">取消</span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="tmp_5">
        <div class="msgboxbg" id="$id">
            <div class="msgboxcontent">
                <div class="tmp5 titlearea"><strong>選擇月份</strong></div>
                <div class="tmp5 contentarea">
                </div>
                <div class="tmp5 btnarea">
                    <span class="tmp5 btnleft" role="btncancel">取消</span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/html" id="tmp_6">
        <div class="msgboxbg" id="$id">
            <div class="msgboxcontent">
                <div class="tmp6 titlearea"><strong>輸入手機號</strong></div>
                <div class="tmp6 contentarea">
                    <input class="tmp6input" type="tel" maxlength="11"/>
                </div>
                <div class="tmp6 btnarea">
                    <span class="tmp6 btnleft" role="btncancel">取消</span>
                    <span class="tmp6 btnright" role="btnok">確定</span>
                </div>
            </div>
        </div>
    </script>

View Code

JS方法

// *模板腳本*///
// // 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

彈出層類

/*--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();
}

View Code

JS簡易彈出層手機版

splay otto 內容標題 tle 高度原理 -1 靜態簡單說明　　手機彈出層模枋了WEIUI.彈出層原理還是依照bootstrap 　　去掉了PC端的ESC關閉.點擊背景層時也不默認關閉. 模板樣子　　 CSS樣式 /*彈出時給body加

JS簡易彈出層

find -a standard 函數對象自定義 def rop 使用步驟 relative 一個簡易的彈出框,內容層自定義.為了簡單靈活的在小項目中使用. 目標要求模仿bootstrap的彈出層實現如何實現 bootstrap彈出框的效果.經過研究後.思路如

html/css/js-layer彈出層的初次使用

func order 鸚鵡麻煩 bottom content layer document margin 　　學習前端有時很多時候要用到彈出層，原生的js寫有些麻煩，而且不美觀，基於jQuery的彈出層組件layer應運而生，近些年來備受青睞。官網上有使用教程，但當初用的

【jq】插件—彈出層layer.js

相冊層級 http lan yui 版本 target 附加 layui layer.js包含了所有的層級情形，並且附加的有：tab層，相冊層、webIM層。適用於移動版本的layer.js 為layer for mobile 配套的layui 非常適合用於後臺系統

JS 彈出框 jquery 彈出層

幾種面板式樣

JS練習之模擬框/彈出層

1、實現原理：利用display=block以及display=none，加以其他的css樣式 2、整體程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

JS 彈出框 jquery 彈出層

幾種面板式樣功能： Js程式碼 //1. 傳入字串 art.dialog({ content: '我支援HTML'}); [js] view plain copy print?//1. 傳入字串art.dialog({ content: '我支援HTM

layer.js 彈出層提交form表單，action重定向

layer.js，一個jquery的外掛，可以用它來做資訊提示，彈出層等。使用layer.js做彈出層時，在彈出層裡直接提交form表單，返回的畫面仍然停留在彈出層裡。我們想在彈出層裡提交form表單後關閉彈出層，並跳轉到另一個畫面。 0.引入layer.j

原生Js彈窗外掛|web彈出層元件|對話方塊

wcPop.js 是一款基於原生javascript開發的前端 web版彈窗元件，遵循原生 H5/css3/JS 的書寫規範，簡單實用、拿來即用（壓縮後僅10KB）。已經相容各大主流瀏覽器。內含多種彈窗型別（普通型彈窗、仿微信|android|ios彈窗、定位彈窗、全屏彈窗），多種動畫展示效果，可以讓您的網

為網頁新增蒙板效果和彈出層js

有的時候我們需要實現彈出一個層然後下面的層被一層蒙板蒙起來使使用者不能點選裡面的按鈕效果，這一效果具體實現的程式碼如下：這是一個測試效果用的html，可以直接拷貝到html檔案中執行。 <html> <head> <!DOCTYPE ht

如何將彈出層的資料通過JS傳回父頁面

在彈出層中 var fcTendername =$("#fcTendername").val(); var fcTendersn =$("#fcTendersn").val(); var fcBuildCorp =$("#fcBuildCorp").val

html+js/jquery實現彈出層效果

在做網頁的時候，彈出層是個很好用的東西，它既可以顯示出我們想要的內容，又無需重新載入，而且彈出層的樣式還可以按我們想要的效果改動，今天就來說一說怎麼做一個彈出層。首先說一個js的方法。這個方法是以前看到的。既然是做彈出層，那麼當然得先做幾個div出來，如

js彈出層評論前判斷是否要登入

Systemnews1Action.class.php public function news(){ session_start(); if (isset($_SESSION['use

js滑鼠點選位置彈出層由中心向四周緩慢擴大

<html> <head> <title>無標題文件</title> <script language="javascript"> var level = 1; var div

Ajax中用layer彈出層並刷新頁面的方法

ble ajax location index window ont tab delet delete $.post("DeleteHandler.ashx", { "table": "Contents", "ID": vals }, fun

JQuery 彈出層，始終顯示在屏幕正中間

filter scrolltop rep 指定 mode spa -c target mod 1.讓層始終顯示在屏幕正中間：樣式代碼： Html代碼 .model{ position: absolute; z-ind

jquery 點擊彈出層自身以外的任意位置，關閉彈出層

top stop 關閉 click spl bsp *** doc mask  <div class="mask"> <div class="wrap"></div> </div>

設置div彈出層顯示隱藏效果

div----頁面div <div id="show_scfsxz" style="display:none;zindex:1000;position:absolute;left:850px;top:28px;border:1px solid #06c;padding:0px;background:#

實現彈出層，遮罩層

point func relative cit get alpha fun javascrip pla 開發中經常會用到彈出遮罩層的時候，下面是一個簡單的遮罩層彈窗 <style type="text/css"> <

彈出層插件(layer)

詳情自定義格式 blog 完成插件 images 傳遞 php 使用彈出層完成文章的詳情查看： 1、給標簽綁定一個class和自定義的屬性article_id 設置class的目的：給這一類的元素方便綁定事件自定義屬性article_id:待會是為了

JS簡易彈出層手機版

相關推薦