<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>H5弹出提示层-上下左右居中</title> <style type="text/css"> .floatingLayers { display: none; position: fixed; width: 100%; top: 0; bottom: 0; right: 0; overflow: auto; text-align: center; } .floatingBox { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); text-align: center; } .floatingBoxText { display: inline-block; margin: 0 20px; padding: 10px 15px; font-size: 16px; color: #FFFFFF; letter-spacing: 0; line-height: 22px; background: rgba(0, 0, 0, 0.72); border-radius: 4px; } </style> </head> <body> <button id="btn">弹出提示层</button> <div id="floatingLayers" class="floatingLayers"> <div class="floatingBox"> <div class="floatingBoxText" id="floatingBoxText">复制成功</div> </div> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $('#btn').on('click', function() { $('#floatingBoxText').text('我是浮动层'); $("#floatingLayers").show().delay(1500).fadeOut(); }); </script> </html>
