css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
生活随笔
收集整理的這篇文章主要介紹了
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目? ?錄
1、遮罩層的制作
2、信息層
3、往白色的塊里添加表單
1、遮罩層的制作
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>.modal {background: black;position: fixed;left: 0;top: 0;right: 0;bottom: 0;opacity: 0.4;}</style> </head><body><input type="button" value="顯示"><div class="modal">1</div><div class="info">2</div> </body></html>2、信息層
主要是白色底的一個盒子。
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>.modal {background: black;position: fixed;left: 0;top: 0;right: 0;bottom: 0;opacity: 0.4;}.info {position: fixed;background-color: white;width: 400px;height: 300px;left: 50%;top: 50%;margin-top: -150px;margin-left: -200px;}</style> </head><body><input type="button" value="顯示"><div class="modal">1</div><div class="info">2</div> </body></html>3、往白色的塊里添加表單
簡單的調整樣式
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>.modal {background: black;position: fixed;left: 0;top: 0;right: 0;bottom: 0;opacity: 0.4;}.info {position: fixed;background-color: white;width: 400px;height: 300px;left: 50%;top: 50%;margin-top: -150px;margin-left: -200px;}form {width: 80%;height: 40%;/*background-color: yellow;*/margin: 50px auto 0;}</style> </head><body><input type="button" value="顯示"><!--遮罩層--><div class="modal">1</div><!--信息層--><div class="info"><!-- 表單--><form action="">姓名：<input type="text" name="username"> <br><input type="submit" value="提交"><input type="button" value="取消"></form></div> </body></html>?多謝觀看~
總結
以上是生活随笔為你收集整理的css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript(基础、高级)笔记汇
- 下一篇： Matlab图像处理创新实践-实验1【图