https://sweetalert.js.org/

原本看了http://layer.layui.com/组建,不过觉得不好用。
直接饮用<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>文件，或者把js下载本地即可

使用方式

swal("标题", "内容!", "success");
三个参数，一个是标题，一个是内容，一个是弹框颜色款式
或者
swal({
              title: "标题",
              text: "内容",
              icon: "success",
          });

图片.png

其他可以自定义的部分

swal({
             button: "我是按钮!",
          });
  

2.也可以直接修饰按钮

swal({
  button: {
    text: "Hey ho!",
  },
});

不显示按钮

swal("Hello world!", {
  button: false,
});

只有确认，没有取消

 swal({
              buttons: {
                  cancel: false,
                  confirm: true,
              },
          });

弹出输入框

swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});

图片.png

删除

  swal({
        title: "确认要将该商品移除？",
        icon: "warning",
        buttons: ['取消', '确定'],
        dangerMode: true,
      })

弹框

 swal('加入购物车成功', '', 'success')

多久之后消失

swal("This modal will disappear soon!", {
  buttons: false,
  timer: 3000,
  icon: 'warning',
});

还可以添加一些主题，要写在自己的css样式里面

<style>
.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}
.swal-modal {
  background-color: rgba(63,255,106,0.69);
  border: 3px solid white;
}
// 修改弹出的字体行
.swal-text {
  background-color: #FEFAE3;
  padding: 17px;
  border: 1px solid #F0E1A1;
  display: block;
  margin: 22px;
  text-align: center;
  color: #61534e;
}
</style>

图片.png

对话效果

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});


swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
})
.then((value) => {
  switch (value) {
 
    case "defeat":
      swal("Pikachu fainted! You gained 500 XP!");
      break;
 
    case "catch":
      swal("Gotcha!", "Pikachu was caught!", "success");
      break;
 
    default:
      swal("Got away safely!");
  }
});

对话框2

swal("Write something here:", {
content: "input",
})
.then((value) => {
swal(`You typed: ${value}`);
});

ajax请求

swal({
  text: 'Search for a movie. e.g. "La La Land".',
  content: "input",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(name => {
  if (!name) throw null;
 
  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
  return results.json();
})
.then(json => {
  const movie = json.results[0];
 
  if (!movie) {
    return swal("No movie was found!");
  }
 
  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;
 
  swal({
    title: "Top result:",
    text: name,
    icon: imageURL,
  });
})
.catch(err => {
  if (err) {
    swal("Oh noes!", "The AJAX request failed!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});

• 这个弹窗必须在DOM加载后执行

  
  
  image.png

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<h1>111</h1>
<script>
    swal("Hello world!");
</script>

 如果没有 h1  是无法加载这个组件的的

  swal({
            title: "复制成功!",
            icon: "success",
            timer: 800,
        });

图片.png