CSS模態框是一種常見的網頁彈窗效果,它通常用于彈出一些重要的提示信息、登陸框、注冊框等等。制作CSS模態框并不是很難,下面我們就來一步步學習。
/* HTML結構 */<div class="modal"> <div class="modal-content"></div> </div>
/* CSS樣式 */.modal { position: fixed; /* 定位方式 */ top: 0; /* 距離頂部的距離 */ left: 0; /* 距離左邊的距離 */ width: 100%; /* 寬度 */ height: 100%; /* 高度 */ background-color: rgba(0,0,0,0.6); /* 半透明黑色背景 */ display: none; /* 初始狀態隱藏 */ } .modal-content { position: absolute; /* 定位方式 */ width: 400px; /* 寬度 */ height: 300px; /* 高度 */ top: 50%; /* 距離頂部的距離 */ left: 50%; /* 距離左邊的距離 */ margin-top: -150px; /* 一半的高度,用于居中 */ margin-left: -200px; /* 一半的寬度,用于居中 */ background-color: #fff; /* 模態框背景色 */ padding: 20px; /* 內邊距 */ }
以上就是一個簡單的CSS模態框的制作方式,具體效果可以在實踐中嘗試。需要注意的是,模態框內部的內容可以根據自己的需求進行更改,比如添加輸入框、按鈕等等。同時還可以在關閉按鈕和模態框外部添加點擊事件,使得用戶點擊即可關閉模態框。
上一篇css模擬登錄案例
下一篇mysql怎么存表情包