H5弹出提示层-上下左右居中

简介: H5弹出提示层-上下左右居中
<!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>

相关文章
|
7月前
|
Windows
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
672 0
|
7月前
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
|
7月前
如何实现按钮的图片在右边,文字在左边
如何实现按钮的图片在右边,文字在左边
109 0
|
7月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
98 0
textarea光标初始位置没有在最左上角的问题
textarea光标初始位置没有在最左上角的问题
设置按钮背景为透明去掉button按钮左右两边的留白
设置按钮背景为透明去掉button按钮左右两边的留白
|
JavaScript 前端开发
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局