发新帖

[web前端] 使用layer UI实现询问弹窗

零下一度 2023-5-25 767

您可以使用 Layer UI 库来实现询问弹窗,以下是实现的步骤:

  1. 首先,将 Layer UI 库文件和样式表添加到您的 HTML 文件中。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layer-ui@2.0.0/dist/css/layer.css">
<script src="https://cdn.jsdelivr.net/npm/layer-ui@2.0.0/dist/js/layer.js"></script>
  1. 创建一个按钮,并在点击时触发弹窗。您可以使用 layer.confirm() 方法来创建询问弹窗。
<button onclick="showConfirm()">询问弹窗</button>
<script>
function showConfirm() {
  layer.confirm({
    title: '确认删除?',
    content: '您确定要删除这条记录吗?',
    btn: ['删除', '取消'],
    yes: function(index, layero) {
      // 点击删除后的操作
      layer.close(index);
    },
    btn2: function(index, layero) {
      // 点击取消后的操作
      layer.close(index);
    }
  });
}
</script>
  1. 在 layer.confirm() 方法中,您可以设置弹窗的标题、内容、按钮文本以及按钮点击后的回调函数(yes 表示第一个按钮点击后的回调函数,btn2 表示第二个按钮点击后的回调函数)。在回调函数中,您可以执行相应的操作,例如关闭弹窗或者发送 AJAX 请求等。

通过上述步骤,您就可以实现一个询问弹窗了。需要注意的是,Layer UI 库还提供了许多其他类型的弹窗,例如消息提示框、加载层等,您可以根据自己的需求进行选择和使用。


最新回复 (0)
返回
零下一度
主题数
931
帖子数
0
注册排名
1