css固定水平垂直居中对齐弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:css固定水平垂直居中对齐弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #new:checked ~ .popup { /* Center styles */ inset: 0; margin: auto; /* End Center styles */ } #old:checked ~ .popup { /* Center styles */ left: 50%; top: 50%; transform: translatex(-50%) translatey(-50%); /* End Center styles */ } #new:checked ~ .popup .popup-title::before { content: "新的 "; } #new:checked ~ .popup .code::before { content: ".popup { \a position: fixed; \a inset: 0; \a margin: auto; \a\a width: fit-content; \a height: fit-content; \a}"; white-space: pre; } #old:checked ~ .popup { border-color: #8bc34a; } #old:checked ~ .popup .popup-title::before { content: "旧的 "; } #old:checked ~ .popup .code::before { content: ".popup { \a position: fixed; \a left: 50%; \a top: 50%; \a transform: translatex(-50%) translatey(-50%); \a\a width: fit-content; \a height: fit-content; \a}"; white-space: pre; } html { font-family: monospace, arial; font-size: clamp(1rem, 3vw, 2rem); max-width: 1000px; margin-inline: auto; color: #333; background-color: #ddd; } body { padding: 30px; } .popup { position: fixed; background-color: #fff; padding: 20px; border: solid 4px #e91e63; border-radius: 10px; box-sizing: border-box; width: fit-content; height: fit-content; max-width: 80vw; max-height: 80vh; display: flex; flex-direction: column; overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5); /* firefox prefixes */ width: -moz-fit-content; height: -moz-fit-content; } .code { padding: 20px; background-color: #dedede; flex: 1; overflow: auto; font-size: clamp(0.8rem, 3vw, 25px); } .popup-title { font-weight: bold; margin-bottom: 10px; font-size: clamp(1rem, 3vw, 1.2rem); } /* side form */ input { display: block; padding: 5px; border: solid 1px rgba(136, 136, 136, 0.7); border-radius: 4px; background-color: rgba(255, 221, 64, 0.8); margin-right: 5px; } label { display: block; padding: 10px; padding-left: 30px; border-radius: 4px; background-color: rgba(255, 221, 64, 0.8); font-size: 16px; font-family: arial; } .new, .old { position: relative; } #old { posi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0