資訊專欄INFORMATION COLUMN
摘要：在實現博客前端頁面一和實現博客前端頁面二中已經實現了對獲取元素和樣式相關的方法的封裝，本文將在實現博客前端頁面三的基礎上實現彈窗組件封裝。
在JS實現博客前端頁面（一） 和JS實現博客前端頁面（二）中已經實現了對獲取DOM元素和CSS樣式相關的方法的封裝，本文將在JS實現博客前端頁面（三）的基礎上實現彈窗組件封裝。
界面設計如下圖所示，在點擊登錄按鈕后，會彈出“網站登錄”的彈窗：
該彈窗組件由一個遮罩層和窗體組成，遮罩可以阻止我們對周圍元素的操作，窗體水平垂直居中，窗體內部是一個登錄表單，點擊右上角的關閉按鈕時整個彈框組件消失。
在之前的html代碼中，創建id="mask"的遮罩層和id="loginBox"的窗體
Document
登錄
密 碼：
注冊新用戶 | 忘記密碼？
在之前的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;
}
設置效果
Base.prototype.center = function(width,height){
//將loginBox 設置為絕對定位
//將瀏覽器窗口的高度-窗體自身的高度后除以2后的值設置為top
//將瀏覽器窗口的寬度-窗體自身的寬度后除以2后的值設置為left
var top=(window.InnerHeight - height)/2 + "px";
var left=(window.InnerWidth - width)/2 + "px";
for (var i=0;i
瀏覽器窗口改變大小時觸發居中
//觸發瀏覽器窗口事件
Base.prototype.resize = function(fn){
window.onresize = fn;
return this;
}
前臺調用
window.onload = function () {
//登錄彈框
var mask = $().getId("mask");//獲取遮罩層
var loginBox=$().getId("loginBox");//獲取窗體
loginBox.center(350,250);//設置船體居中
//瀏覽器窗口改變時依然居中
$().resize(function(){
loginBox.center(350,250);
});
//默認彈窗隱藏，點擊登錄按鈕時顯示彈窗
$().getClass("login").click(function() {
/* Act on the event */
loginBox.show();
mask.show();
});
//點擊關閉按鈕時隱藏彈窗
$().getClass("close").click(function() {//點擊窗體關閉按鈕，
/* Act on the event */
loginBox.hide();
mask.hide();
});
};
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90962.html
摘要：在實現博客前端頁面四中已經實現了對彈窗組件的封裝，現在我們想要在瀏覽器窗口內可以對彈窗進行拖拽移動，就需要封裝拖拽事件。 在JS實現博客前端頁面（四）中已經實現了對彈窗組件的封裝，現在我們想要在瀏覽器窗口內可以對彈窗進行拖拽移動，就需要封裝拖拽事件。 拖拽的原理 首先我們需要了解拖拽的原理，大致分為如下幾個步驟： 將鼠標移動到需要拖拽的物體上，按下鼠標，觸發onmousedown事件...
摘要：三更新內容在原來項目的基礎上，做了如下更新數據庫重新設計，改成以用戶分組的數據庫結構應數據庫改動，所有接口重新設計，并統一采用和網易立馬理財一致的接口風格刪除原來游客模式，增加登錄注冊功能，支持彈窗登錄。 這個項目最初其實是fork別人的項目。當初想接觸下mongodb數據庫，找個例子學習下，后來改著改著就面目全非了。后臺和數據庫重構，前端增加了登錄注冊功能，僅保留了博客設置頁面，但是...
摘要：有二維碼掃描功能，還做了類似消息可拖拽效果，上拉下拉刷新，輪播圖組件。特別適合用于基于模式的移動應用程序開發。簡介是一個用基于，和的，創建移動跨平臺移動應用程序的快速開發平臺。 這個項目做得比較早，當時是基于ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
閱讀 2415·2021-11-11 11:01
閱讀 3287·2021-10-11 10:57
閱讀 2645·2021-09-30 09:46
閱讀 3492·2021-07-26 23:38
閱讀 1564·2019-08-29 12:22
閱讀 650·2019-08-29 11:28
閱讀 2352·2019-08-26 14:04
閱讀 3050·2019-08-23 18:34
