推荐一个前端弹框组建

https://sweetalert.js.org/

原本看了http://layer.layui.com/组建,不过觉得不好用。
直接饮用文件,或者把js下载本地即可

使用方式

swal("标题", "内容!", "success");
三个参数,一个是标题,一个是内容,一个是弹框颜色款式
或者
swal({
              title: "标题",
              text: "内容",
              icon: "success",
          });
推荐一个前端弹框组建_第1张图片
图片.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",
    },
  },
});
推荐一个前端弹框组建_第2张图片
图片.png

删除

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

弹框

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

多久之后消失

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

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


推荐一个前端弹框组建_第3张图片
图片.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加载后执行


    推荐一个前端弹框组建_第4张图片
    image.png

111

如果没有 h1 是无法加载这个组件的的
  swal({
            title: "复制成功!",
            icon: "success",
            timer: 800,
        });
推荐一个前端弹框组建_第5张图片
图片.png

你可能感兴趣的:(推荐一个前端弹框组建)