Javascript Dialog 自訂輸入視窗 (二) HTML規劃輸入視窗樣式
瞭解物件怎麼建立後,接下來就可以開始進行程式的撰寫,不過在撰寫之前先用 html 把樣式先寫出來,到時再套用物件以及使用產生語法時,才比較不會有落差.以下為本次的內容
- CSS 樣式
- HTML 格式
一、CSS樣式
先列出全部的CSS,程式如下
<style>
.fullscreen {
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: rgb(0, 0, 0);
opacity: 50%;
z-index: 100;
}
.dialog {
position: absolute;
margin:10vh 20vw;
padding-bottom: 20px;
top: 0px;
left: 0px;
width: 60vw;
z-index: 200;
/* 外觀 */
border-radius: 20px;
background-color:rgb(200, 200, 200);
box-shadow: 5px 5px 20px 1px;
}
.dialog div {
margin: 20px 5vw;
}
.dialog div * {
font-size: 20px;
}
.dialog input,
select {
margin: 5px 10px;
}
.dialog_control ,
.dialog_control button {
margin-top: 20px;
margin-right: 20px;
min-width: 100px;
float:right;
}
.dialog_title {
font-weight: bold;
padding: 2px 20px;
background-color: gray;
}
.inputText {
width: 60%;
}
</style>
首先在 fullscreen 跟 dialog 都會有個 z-index,數值越大表示在更上層.dialog 比 fullscreen 數值還要大,所以整個視窗由上而下是 .dialog => fullscreen => 畫面底部.這個目的就是在模擬彈出視窗的時候 fullscreen 先將背景淡化,也因為會佔滿整個螢幕,所以原先在底層的輸入滑鼠便無法點選.然後再疊上一層 dialog ,這時主要輸入視窗就可以進行輸入了.
二、HTML格式
再來將想要的樣式用 HTML 規劃出來,程式碼如下
<body>
<div class="fullscreen">
</div>
<div class="dialog">
<div>
<label class="dialog_title">輸入框</label>
<input type="text" value="" class="inputText">
</div>
<div>
<label class="dialog_title">單一選擇</label>
<input type="radio" id="area_01" value="01" name="area"><label for="area_01">北區</label>
<input type="radio" id="area_02" value="02" name="area"><label for="area_02">中區</label>
<input type="radio" id="area_03" value="03" name="area"><label for="area_03">南區</label>
</div>
<div>
<label class="dialog_title">選核方塊</label>
<input type="checkbox" id="AMDIP_A" value="A" name="AMDIP"><label for="AMDIP_A">新增</label>
<input type="checkbox" id="AMDIP_M" value="M" name="AMDIP"><label for="AMDIP_M">修改</label>
<input type="checkbox" id="AMDIP_D" value="D" name="AMDIP"><label for="AMDIP_D">刪除</label>
<input type="checkbox" id="AMDIP_I" value="I" name="AMDIP"><label for="AMDIP_I">執行</label>
<input type="checkbox" id="AMDIP_P" value="P" name="AMDIP"><label for="AMDIP_P">列印</label>
</div>
<div>
<label class="dialog_title">下拉式選單</label>
<select name = "OWNER">
<option value="">請選擇權限</option>
<option value="001">管理者</option>
<option value="002">組長</option>
<option value="003">組員</option>
</select>
</div>
<div class="dialog_control">
<button>取消輸入</button>
<button>清除所有資料</button>
<button>確定</button>
</div>
</div>
</body>
很簡單的輸入樣式,主要還是靠 CSS 的樣式控制,以下是執行畫面
留言
張貼留言