Astrodriver.js

防止游览退出

你还可以使用 allowClose 选项阻止用户退出游览。当你想强制用户完成导览后才能退出时，此选项很有用。

¥You can also prevent the user from exiting the tour using allowClose option. This option is useful when you want to force the user to complete the tour before they can exit.

在下面的示例中，你将无法退出游览，直到到达最后一步。

¥In the example below, you won’t be able to exit the tour until you reach the last step.

Prevent Exit

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

const driverObj = driver({
  showProgress: true,
  allowClose: false,
  steps: [
    { element: '#prevent-exit', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
    { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
    { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
    { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
  ],
});

driverObj.drive();