成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

PumpkinDylan / 2859人閱讀

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

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

界面設(shè)計(jì)

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

搭建HTML頁(yè)面

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




    
    Document
    
    
    
    


     
    
    

    

        

        
密 碼：

        

        
注冊(cè)新用戶 | 忘記密碼？
設(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è)置為絕對(duì)定位
    //將瀏覽器窗口的高度-窗體自身的高度后除以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

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


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


前臺(tái)調(diào)用

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

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

};

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90962.html

相關(guān)文章

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

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

    mozillazg 評(píng)論0 收藏0

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

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

    wh469012917 評(píng)論0 收藏0

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

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

    孫淑建 評(píng)論0 收藏0

  • HTML-CSS-JS

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

    mikasa 評(píng)論0 收藏0

  • HTML-CSS-JS

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

    李世贊 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<