亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JS實現(xiàn)博客前端頁面（四） —— 封裝彈窗組件

PumpkinDylan / 2974人閱讀

摘要：在實現(xiàn)博客前端頁面一和實現(xiàn)博客前端頁面二中已經(jīng)實現(xiàn)了對獲取元素和樣式相關(guān)的方法的封裝，本文將在實現(xiàn)博客前端頁面三的基礎(chǔ)上實現(xiàn)彈窗組件封裝。

在JS實現(xiàn)博客前端頁面（一） 和JS實現(xiàn)博客前端頁面（二）中已經(jīng)實現(xiàn)了對獲取DOM元素和CSS樣式相關(guān)的方法的封裝，本文將在JS實現(xiàn)博客前端頁面（三）的基礎(chǔ)上實現(xiàn)彈窗組件封裝。

界面設(shè)計

如下圖所示，在點擊登錄按鈕后，會彈出“網(wǎng)站登錄”的彈窗：
該彈窗組件由一個遮罩層和窗體組成，遮罩可以阻止我們對周圍元素的操作，窗體水平垂直居中，窗體內(nèi)部是一個登錄表單，點擊右上角的關(guān)閉按鈕時整個彈框組件消失。

搭建HTML頁面

在之前的html代碼中，創(chuàng)建id="mask"的遮罩層和id="loginBox"的窗體




    
    Document
    
    
    
    


     
    
    

    

        

        
密 碼：

        

        
注冊新用戶 | 忘記密碼？
設(shè)置CSS樣式

在之前的CSS代碼中，加入id="mask"的遮罩層和id="loginBox"的窗體的樣式

#mask{//遮罩層
    position: absolute;
    z-index: 999;
    top:0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: #000;
    filter: alpha(Opacity=30);
    opacity: .2;
    display: none; 

}
#loginBox{//窗體
    position: absolute;
    z-index: 1000;
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: none; 
}
#loginBox h2{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    letter-spacing:1px;
    color: #666;
    background: url(../images/login_header.png) repeat-x;
    margin:0;
    padding:0;
    border-bottom: 1px solid #ccc;
    margin:0 0 20px 0;
}
#loginBox h2 img{
    display: block;
    float: right;
    position: relative;
    top:10px;
    right: 10px;
    cursor: pointer;

}
#loginBox .user,#loginBox .pass{
    font-size: 14px;
    color: #666;
    padding: 5px 0;
    text-align: center;
}
#loginBox input.text{
    width:200px;
    height: 25px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;

}
#loginBox .button{
    text-align: center;
    padding: 10px 0;

}
#loginBox input.submit{
    width: 107px;
    height: 30px;
    background: url(../images/login_button.png) no-repeat;
    border: none;
    cursor: pointer;
} 
#loginBox .other{
    text-align: right;
    padding:15px 10px;
    font-size: 14px;
    color: #666;
}
設(shè)置效果
設(shè)置窗體水平垂直居中
Base.prototype.center = function(width,height){
    //將loginBox 設(shè)置為絕對定位
    //將瀏覽器窗口的高度-窗體自身的高度后除以2后的值設(shè)置為top
    //將瀏覽器窗口的寬度-窗體自身的寬度后除以2后的值設(shè)置為left
    var top=(window.InnerHeight - height)/2 + "px";
    var left=(window.InnerWidth - width)/2 + "px";
    for (var i=0;i

瀏覽器窗口改變大小時觸發(fā)居中


//觸發(fā)瀏覽器窗口事件
Base.prototype.resize = function(fn){ 
     window.onresize = fn;
     return this;
}


前臺調(diào)用

window.onload = function () {
    //登錄彈框
    var mask = $().getId("mask");//獲取遮罩層
    var loginBox=$().getId("loginBox");//獲取窗體
    loginBox.center(350,250);//設(shè)置船體居中
    //瀏覽器窗口改變時依然居中
    $().resize(function(){
        loginBox.center(350,250);

    });
    //默認彈窗隱藏，點擊登錄按鈕時顯示彈窗
    $().getClass("login").click(function() {
         /* Act on the event */
         loginBox.show();
         mask.show();
     });
    //點擊關(guān)閉按鈕時隱藏彈窗
     $().getClass("close").click(function() {//點擊窗體關(guān)閉按鈕，
         /* Act on the event */
         loginBox.hide();
         mask.hide();
     }); 

};

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90962.html

相關(guān)文章

  • JS實現(xiàn)博客前端頁面（五） —— 封裝彈窗拖拽事件

    摘要：在實現(xiàn)博客前端頁面四中已經(jīng)實現(xiàn)了對彈窗組件的封裝，現(xiàn)在我們想要在瀏覽器窗口內(nèi)可以對彈窗進行拖拽移動，就需要封裝拖拽事件。 在JS實現(xiàn)博客前端頁面（四）中已經(jīng)實現(xiàn)了對彈窗組件的封裝，現(xiàn)在我們想要在瀏覽器窗口內(nèi)可以對彈窗進行拖拽移動，就需要封裝拖拽事件。 拖拽的原理 首先我們需要了解拖拽的原理，大致分為如下幾個步驟： 將鼠標移動到需要拖拽的物體上，按下鼠標，觸發(fā)onmousedown事件...

    mozillazg 評論0 收藏0

  • 一個基于Vue.js+Mongodb+Node.js的博客內(nèi)容管理系統(tǒng)

    摘要：三更新內(nèi)容在原來項目的基礎(chǔ)上，做了如下更新數(shù)據(jù)庫重新設(shè)計，改成以用戶分組的數(shù)據(jù)庫結(jié)構(gòu)應(yīng)數(shù)據(jù)庫改動，所有接口重新設(shè)計，并統(tǒng)一采用和網(wǎng)易立馬理財一致的接口風(fēng)格刪除原來游客模式，增加登錄注冊功能，支持彈窗登錄。 這個項目最初其實是fork別人的項目。當(dāng)初想接觸下mongodb數(shù)據(jù)庫，找個例子學(xué)習(xí)下，后來改著改著就面目全非了。后臺和數(shù)據(jù)庫重構(gòu)，前端增加了登錄注冊功能，僅保留了博客設(shè)置頁面，但是...

    wh469012917 評論0 收藏0

  • 一個基于Angular+Ionic+Phonegap的混合APP實戰(zhàn)

    摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動應(yīng)用程序開發(fā)。簡介是一個用基于，和的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。 這個項目做得比較早，當(dāng)時是基于ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調(diào)用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設(shè)...

    孫淑建 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    mikasa 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    李世贊 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<