# HTML與PHP結合
# 登入畫面
## 主講人：黃夙賢
https://github.com/shhuangmust/php
---
## 如何製作彈跳式登入畫面
- 一頁式系網頁範例：[29.immust.html](https://github.com/shhuangmust/php/blob/112-2/29.immust.html)
- 如何讓『登入』畫面隱藏在一頁式網頁中，點入後彈跳出登入畫面?
- 利用javascript
 
---
## 登入畫面
- 把超連結，用label取代，加上javascript控制display為none(消失)或顯示(block)
- getElementById('login')：找出id=login標籤
```htmlmixed
<!--
<a href=2.login.html>登入</a>
-->
<label onclick="document.getElementById('login').style.display='block'">登入</label>
<div id="login" class="modal">
<span onclick="document.getElementById('login').style.display='none'">× 管理系統登入</span>
<form method=post action="10.login.php">
帳號：<input type=text name="id"><br />
密碼：<input type=password name="pwd"><p></p>
<input type=submit value="登入"> <input type=reset value="清除">
</form>
```
---
## 登入畫面CSS
- 需搭配css，預設display:none
```css
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
right: 50;
top: 50;
width: 20%; /* Full width */
height: 20%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(255,255,255,0.9); /* Black w/ opacity */
padding-top: 50px;
}
```
---
{"title":"HTML與PHP結合-登入畫面","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":1424,\"del\":24}]"}