点击图片放大看效果
上代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> <style> /*弹窗----------------------------------------*/ .alert {background: #00000055;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;display: flex;justify-content: center;align-items: center;} .alert[hidden] {display: none;} .alert-win {width: 384px;border-radius: 6px;background: #fff;box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .2);overflow: hidden;} .alert-win .header {background: #f2f5fa;padding: 24px 32px;} .alert-win .header .header-top {display: flex;justify-content: space-between;align-items: center;} .alert-win .header .header-top h3 {margin: 0;padding: 0;} .alert-win .header p {padding: 0;margin: 16px 0 0 0;font-size: 14px;color: rgba(41, 47, 58, .7);letter-spacing: 0;line-height: 22px;} .alert-win .footer {display: flex;justify-content: space-between;padding: 16px 32px;background: #fff;box-shadow: 0 -1px 0 0 rgba(192, 196, 204, .4);text-align: right;} .alert-win .footer > * {margin: 0 5px;} .alert-win .footer > *:first-of-type {margin-left: 0;} .alert-win .footer > *:last-of-type {margin-right: 0;} /*关闭按钮----------------------------------------*/ .close-btn {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;width: 24px;height: 24px;font-size: 16px;cursor: pointer;display: inline-block;font-style: normal;position: relative;text-align: center;user-select: none;} .close-btn:after {content: "";position: absolute;margin-top: -21px;display: block;width: 100%;height: 100%;border-radius: 100%;background-color: rgba(0, 0, 0, .08);opacity: 0;transform: scale(.5);transition: all .2s cubic-bezier(.175, .885, .32, 1.275);} .close-btn:hover:after {opacity: 1;transform: scale(1.4);} /*蓝色按钮----------------------------------------*/ button {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .2s ease-out;cursor: pointer;height: 50px;width: 100%;border: 1px solid rgba(51, 100, 237, .35);color: #fff;font-size: 16px;font-weight: bold;border-radius: 3px;background: linear-gradient(180deg, #648CFF 0%, #4172FA 100%);box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;text-align: center;line-height: 46px;user-select: none;} button:hover {opacity: .9;box-shadow: none;} button:focus, button:active {outline: none;background: linear-gradient(180deg, #4d7bff, #154deb);transform: scale(.97);} button[disabled] {color: #fff;background: #b0c7ff;pointer-events: none;cursor: default;box-shadow: none;} /*白色按钮----------------------------------------*/ button[white] {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .2s ease-out;cursor: pointer;width: 100%;height: 50px;border: none;border-radius: 3px;font-size: 16px;font-weight: bold;color: #292f3a;letter-spacing: 0;outline: none;background: linear-gradient(-180deg, #fff 8%, #f2f2f7 97%);box-shadow: 0 2px 3px 0 rgba(44, 71, 146, .32), 0 -1px 1px 0 rgba(44, 71, 146, .1);} button[white]:hover {background: linear-gradient(-180deg, #f2f2f7 20%, #f2f2f7 97%);box-shadow: none;color: #3973ff;border: none;} button[white]:active, button[white]:active {background: #d8dde6;transform: scale(.97);} button[white][disabled] {background: rgba(216, 221, 230, .8) !important;pointer-events: none;cursor: default;color: white;box-shadow: none;} </style> </head> <body> <button onclick="showAlert()">点击显示弹窗</button> <div class="alert" hidden> <div class="alert-win"> <div class="header"> <div class="header-top"><h3>对话框标题</h3><i class="close-btn" onclick="hideAlert()">✕</i></div> <p>使用 AI 动态判断网站当前的攻击势态，并结合每次请求的多维度数据组合，AI 能够做到对每一次请求使用不同的防御能力组合。</p></div> <div class="content"> <br> <br> <p style="text-align: center;">正文内容</p> <br> <br> </div> <div class="footer"> <button white onclick="hideAlert()">取消</button> <button onclick="hideAlert()">确定</button> </div> </div> </div> </body> <script> function showAlert() { document.querySelector(".alert").removeAttribute("hidden"); } function hideAlert() { document.querySelector(".alert").setAttribute("hidden", true); } </script> </html>
