创建灯箱：您可以通过进入编辑器，单击左侧面板中的“添加”，选择“Lightbox”，然后单击“创建Lightbox”来创建Lightbox。给予它一个名字，例如。“Login Lightbox”.
将登录表单添加到Lightbox：一旦你创建了lightbox，你可以添加一个登录表单。您可以将登录表单从左侧面板拖放到lightbox上。
将登录按钮添加到页眉：将“登录/注销”按钮添加到母版页的标题中。您可以将onClick事件添加到将触发Lightbox的按钮。显示lightbox的代码如下：

javascript
import wixWindow from 'wix-window';

$w.onReady(function () {
  $w("#loginButton").onClick(() => {
    if($w("#loginButton").label === "Log in"){
      wixWindow.openLightbox("Login Lightbox");
    } else {
      //logout functionality
      //replace this with your own logout code
      $w("#loginButton").label = "Log in";
    }
  });
});

这段代码检查按钮的标签。如果是“登录”，则打开Lightbox。如果是“注销”，则会注销用户并将标签更改回“登录”。
处理登录和注销：要处理登录和注销功能，可以向Lightbox中的登录表单添加onSubmit事件。处理登录的代码如下所示：

javascript
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';

$w.onReady(function () {
  $w("#loginForm").onSubmit((event) => {
    let email = $w("#inputEmail").value;
    let password = $w("#inputPassword").value;
    wixUsers.login(email, password)
      .then(() => {
        //replace this with your own success code
        $w("#loginButton").label = "Log out";
        wixWindow.lightbox.close();
      })
      .catch((err) => {
        //replace this with your own error handling code
        console.log(err);
      });
  });
});

此代码处理登录表单提交。它获取email和password值，然后调用wixUsers.login（）函数让用户登录。如果登录成功，则将“登录/注销”按钮的标签更改为“注销”并关闭灯箱。如果出现错误，它会将错误记录到控制台。
听灯箱关闭：要在Lightbox关闭时更新“登录/注销”按钮标签，您可以向Lightbox添加onClose事件。更新按钮标签的代码如下所示：

perl
$w("#Login Lightbox").onClose(() => {
  if(wixUsers.currentUser.loggedIn){
    $w("#loginButton").label = "Log out";
  } else {
    $w("#loginButton").label = "Log in";
  }
});

此代码侦听Lightbox关闭事件。如果用户已登录，它会将“登录/注销”按钮的标签更改为“注销”。如果用户未登录，则将标签更改回“登录”。