Feature `hs-overlay-backdrop-open` not working in NextJS

[kukuhnovaputra]

Summary

hs-overlay-backdrop-open not showing

Steps to Reproduce

I tried the Custom backdrop color feature found at https://preline.co/docs/modal.html#custom-backdrop-color using NextJS.

The modal function works well, but the color class hs-overlay-backdrop-open:bg-blue-950/90 does not change as described in the documentation.

I also encountered this issue with all the examples in the documentation at https://preline.co/examples/layouts-application.html.

Is this a bug in the Preline script, or is there a script I have not added? Thank you.

Demo Link

n/a

Expected Behavior

When the CSS code hs-overlay-backdrop-open:bg-blue-950/90 is added, the backdrop changes to blue.

Actual Behavior

The backdrop color does not change.

Screenshots

[kukuhnovaputra]

solved

[langscot]

@kukuhnovaputra would you mind sharing how you solved this please, since I have the same issue? Thanks.

[kukuhnovaputra]

@kukuhnovaputra would you mind sharing how you solved this please, since I have the same issue? Thanks.

First, create modal function file components/ModalFunc.tsx

"use client";

import { createContext, useContext, useState, ReactNode } from "react";

interface ModalFuncType {
  isOpen: boolean;
  handleOpen: () => void;
  handleClose: () => void;
}

const ModalFunc = createContext<ModalFuncType | undefined>(undefined);

export const ModalWrapper = ({ children }: { children: ReactNode }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <ModalFunc.Provider value={{ isOpen, handleOpen, handleClose }}>
      {children}
    </ModalFunc.Provider>
  );
};

export const useModal = () => {
  const context = useContext(ModalFunc);
  if (context === undefined) {
    throw new Error("useModal must be used within a ModalWrapper");
  }
  return context;
};

Then create modal button ui components/ModalButton.tsx

"use client";

import { useModal } from "./ModalFunc";

const ModalButton = () => {
  const { handleOpen, isOpen } = useModal();

  return (
    <button
      type="button"
      className=""
      aria-haspopup="dialog"
      aria-expanded={isOpen}
      aria-controls="hs-custom-backdrop-modal"
      onClick={handleOpen}
    >
      Open modal
    </button>
  );
};

export default ModalButton;

And then create modal ui components/Modal.tsx

"use client";

import { useModal } from "./ModalFunc";

const Modal = () => {
  const { isOpen, handleClose } = useModal();

  if (!isOpen) return null;

  return (
    <div>
      Your Modal UI example here > https://preline.co/docs/modal.html
    </div>
  );
};

export default Modal;

Last import all component to your page.tsx file

import { ModalWrapper } from "./components/ModalFunc";
import ModalButton from "./components/ModalButton";
import Modal from "./components/Modal";

export default function Overview() {
   return (
       <ModalWrapper>
        <ModalButton/>
        <Modal/>
       </ModalWrapper>
   );
}

There are many ways to display it, here is one example I use. You can use this for sidebars too. happy coding :)