實(shí)戰(zhàn)題
學(xué)習(xí)完《遮罩全屏及自動(dòng)居中浮層》課程后，進(jìn)行本題目的實(shí)戰(zhàn)練習(xí)，通讀右側(cè)編輯器中的代碼，完成相應(yīng)的任務(wù)！本
模塊有三個(gè)任務(wù)等著你去完成！
任務(wù)
任務(wù)1：請(qǐng)?jiān)谟覀?cè)編輯器的133行補(bǔ)充完整腳本中g(shù)函數(shù)的內(nèi)容
任務(wù)2：請(qǐng)?jiān)谟覀?cè)編輯器的143行補(bǔ)充完整腳本 autoCenter 函數(shù)中 計(jì)算元素居中時(shí)left的值的具體代碼
任務(wù)3:請(qǐng)?jiān)谟覀?cè)編輯器的133行補(bǔ)充完整腳本中 fillToBody 函數(shù)中 獲取可視區(qū)域高度的代碼
溫馨提示：完成的任務(wù)要與要求的代碼效果相一致才可以通過(guò)本次測(cè)試，否則就再看一遍視頻哦！
- ?不會(huì)了怎么辦
-
如果出不了結(jié)果，就再溫習(xí)一下內(nèi)容吧，本內(nèi)容是重點(diǎn)，沒(méi)有提示哦！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網(wǎng)-拖拽效果</title>
<style type="text/css">
body{background: url(images/baidu_demo.png) #fff top center no-repeat;
padding: 0px;margin: 0px;font-size: 12px;font-family: "微軟雅黑";
}
/*登錄浮層組件*/
.ui-dialog{
width: 380px;height: auto;
position: absolute;z-index: 9000;
top: 100px;left: 100px;
border: 1px solid #D5D5D5;background: #fff;
}
.ui-dialog a{text-decoration: none;}
/*標(biāo)題欄區(qū)域*/
.ui-dialog-title{
height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
border-bottom: 1px solid #efefef;background: #f5f5f5;
cursor: move;
user-select:none;
}
/*關(guān)閉按鈕設(shè)置*/
.ui-dialog-closebutton{
width: 16px;height: 16px;display: block;
position: absolute;top: 12px;right: 20px;
background: url(images/close_def.png) no-repeat;cursor: pointer;
}
.ui-dialog-closebutton:hover{background:url(images/close_hov.png);}
/*內(nèi)容區(qū)域*/
.ui-dialog-content{
padding: 15px 20px;
}
/*每行元素可能需要的樣式*/
.ui-dialog-pt15{
padding-top: 15px;
}
.ui-dialog-l40{
height: 40px;line-height: 40px;
text-align: right;
}
/*輸入框公用的樣式*/
.ui-dialog-input{
width: 100%;height: 40px;
margin: 0px;padding:0px;
border: 1px solid #d5d5d5;
font-size: 16px;color: #c1c1c1;
text-indent: 25px;
outline: none;
}
/*兩個(gè)輸入框的icon設(shè)置*/
.ui-dialog-input-username{
background: url(images/input_username.png) no-repeat 2px ;
}
.ui-dialog-input-password{
background: url(images/input_password.png) no-repeat 2px ;
}
/*提交按鈕的樣式*/
.ui-dialog-submit{
width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
outline: none;text-decoration: none;
display: block;text-align: center;line-height: 50px;
}
.ui-dialog-submit:hover{
background: #3f81b0;
}
.ui-mask{
width: 100%;height:100%;background: #000;
position: absolute;top: 0px;height: 0px;z-index: 8000;
opacity:0.4; filter: Alpha(opacity=40);
}
.link{
text-align: right;line-height: 20px;padding-right: 40px;
}
</style>
</head>
<body >
<div class="ui-dialog" id="dialog">
<div class="ui-dialog-title" id="dialogTitle">
登錄通行證
<a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-pt15 ui-dialog-l40">
<input type="text" value="手機(jī)/郵箱/用戶名" class="ui-dialog-input ui-dialog-input-username">
</div>
<div class="ui-dialog-pt15 ui-dialog-l40">
<input type="text" value="密碼" class="ui-dialog-input ui-dialog-input-password">
</div>
<div class=" ui-dialog-l40 ">
<a href="#">忘記密碼</a>
</div>
<div>
<a href="#" class="ui-dialog-submit">登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#">立即注冊(cè)</a>
</div>
</div>
</div>
<div class="link">
<a href="javascript:showDialog();">登錄</a>
</div>
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<script type="text/javascript">
// 獲取元素對(duì)象
function g(id){【任務(wù)1】}
// 自動(dòng)居中元素（el = Element）
function autoCenter( el ){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = 【任務(wù)2】 + 'px';
el.style.top = (bodyH-elH)/2 + 'px';
}
// 自動(dòng)擴(kuò)展元素到全部顯示區(qū)域
function fillToBody( el ){
el.style.width = document.documentElement.clientWidth +'px';
el.style.height = 【任務(wù)3】 + 'px';
}
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
