自定义弹出框

您可以使用默认的类名并覆盖样式，或者您可以全局或按步骤传递自定义类名到`popoverClass`选项中。

或者，如果您想要修改弹出框的DOM，您可以使用`onPopoverRender`回调来获取弹出框的DOM元素，并在弹出框渲染之前对其进行任何您想要的操作。

我们在下面添加了一些示例，但请查看定制主题 - 弹出框样式定制部分以获取详细指南，包括要定位的类名等。

使用 CSS

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  popoverClass: 'driverjs-theme'
});

driverObj.highlight({
  element: '#demo-theme',
  popover: {
    title: 'Style However You Want',
    description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.'
  }
});

这是用于上述示例的CSS：

.driver-popover.driverjs-theme {
  background-color: #fde047;
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
}

.driver-popover.driverjs-theme button {
  flex: 1;
  text-align: center;
  background-color: #000;
  color: #ffffff;
  border: 2px solid #000;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

.driver-popover.driverjs-theme button:hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: space-between;
  gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  color: #9b9b9b;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #fde047;
}

使用钩子进行修改

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  // Get full control over the popover rendering.
  // Here we are adding a custom button that takes
  // the user to the first step.
  onPopoverRender: (popover, { config, state }) => {
    const firstButton = document.createElement("button");
    firstButton.innerText = "Go to First";
    popover.footerButtons.appendChild(firstButton);

    firstButton.addEventListener("click", () => {
      driverObj.drive(0);
    });
  },
  steps: [
    // ..
  ]
});

driverObj.drive();

入门介绍

示例

自定义弹出框

使用 CSS

使用钩子进行修改