html，js,弹窗提示------ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ShowToast</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  <style>
    #showToastWraper {
      position: fixed;
      z-index: 999;
      top: 35%;
      right: 0;
      left: 0;
      width: 90%;
      margin: auto;
      background: rgba(0, 0, 0, 0.6);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
      text-align: center;
      padding: 10px 20px;
      color: #dcdcdc;
      border-radius: 50px;
    }
  </style>
</head>

<body>
  <button id="show" class="btn btn-primary">showToast</button>

  <script>

    function showToast(text, width, radius) {
      var widthDiv = width ? width : '90%';//自定义宽度
      var radiusDiv = radius ? radius : '50px';//自定义边框角度
      //此处你还可以定义 位置、文字颜色大小、背景色、显示时长等等

      var showToastDiv = "<div id='showToastWraper'></div>";
      var showToastWraper = $("#showToastWraper");
      var isExat = showToastWraper.length;

      if (!isExat) {
        //第一次创建元素 并且设置元素把显示状态的停止掉、渐隐显示、显示文本内容、设置自定义样式、1.5s后渐隐消失
        $(document.body).append(showToastDiv);
        $("#showToastWraper").stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
      } else {
        //第二次 就不需要创建元素了减少dom操作
        showToastWraper.stop().fadeIn(300).html(text).css({ width: widthDiv, borderRadius: radiusDiv }).delay(1500).fadeOut(500);
      }
    }

    $("#show").on("click", function () {
      showToast('显示文本内容显显示文本内容显'); //默认显示的样式
      // showToast('显示文本内容显显示文本内容显', '90%', '50px'); //可以更改宽度、边框角度等等
    })
  </script>
</body>

</html>
posted @   风意不止  阅读(633)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示