I’ve created a card component which has it’s background image set from it’s parent component. These cards act as buttons to open modals with more details and share an image. I don’t want the modal constrained to the size of the card. I want it to appear over the rows of cards.

I tried to:

1. I set a signal in my parent component.
2. Then passed the setter for the signal into my card component.
3. In my card component I use the setter to set the new signal value upon opening the modal.
4. Then passed the new signal value into the modal as a prop.
5. I use the prop value for the modal image.

PARENT COMPONENT

export const ClassSelect = () => {
    const [classes] = createResource(getClasses);
    const [modalToggle, setModalToggle] = createSignal(false);

//--- 1.SET THE SIGNAL ---
    const [modalBackground, setModalBackground] = createSignal('');

    return (
        <div className="classSelectLayoutStyles">
            <h1 className="pl-4 text-white font-extrabold text-shadow-main text-header-md shadow-fuchsia-900">
                Select a Class!
            </h1>
            <div className="classSelectGridStyles">
                <For each={classes()}>{(_class) =>
                    <SelectionCard
                    name={_class.class_name}
                    backgrounds={classBackgrounds}
                    cardShrink={"classBackgroundShrink"}
                    imgShrink={"classImageShrink"}
                    modalToggle={modalToggle}
                    setModalToggle={setModalToggle}
//--- 2.PASS THE SETTER ---
                    modalBackground={modalBackground}
                    **setModalBackground={setModalBackground}**
                />
                }</For>
            </div>
            <Show when={modalToggle()}>
//--- 3.PASS THE NEW SIGNAL VALUE ---
                <ClassDescriptionModal setModalToggle={setModalToggle} modalBackground={modalBackground}/>
            </Show>
        </div>
    );
};

CARD COMPONENT

export const SelectionCard = (props) => {
  const selectionName = props.name;
  const selectionBackgrounds = props.backgrounds;
  const cardShrink = props.cardShrink;
  const imgShrink = props.imgShrink;
  const setModalToggle = props.setModalToggle;
  const modalBackground = props.modalBackground;
  const setModalBackground = props.setModalBackground;

  const selectionBackground = selectionBackgrounds[selectionName.toLowerCase().replace(/s/g, "")];

  const createSelectionClass = (selectionBackgrounds) => {
    if (selectionBackgrounds) {
      return (
        imgShrink +
        " " +
        selectionBackground +
        " saturate-30 hover:saturate-100 flex justify-center w-full h-full"
      );
    } else {
      return "selectionBackground bg-skulls bg-gray-900 saturate-30 hover:saturate-100 flex justify-center w-full h-full";
    }
  };
//--- 4.SET THE NEW SIGNAL VALUE UPON OPENING THE MODAL ---
  const openModal = () => {
    setModalBackground(selectionBackground);
    setModalToggle(true);
  };

  return (
    <div
      onClick={openModal}
      className={
        cardShrink
          ? "baseLayoutStyles " + cardShrink
          : "baseLayoutStyles cardShrink"
      }
    >
      <div className={createSelectionClass(selectionBackgrounds)}>
        <div className="text-center text-white text-xl font-extrabold pt-4 bg-colorHeader rounded-t w-full h-1/6 text-shadow shadow-gray-800">
          {selectionName}
        </div>
      </div>
    </div>
  );
};

MODAL COMPONENT

export const ClassDescriptionModal = (props) => {
  const setModalToggle = props.setModalToggle;
  const modalBackground = props.modalBackground;

  const getModalClass = (modalBackground) => {
    return "w-1/2 h-full "+ modalBackground +" rounded-l-lg";
  }

  const closeModal = () => setModalToggle(false);

  return (
    <div onClick={closeModal} className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-10 z-50 flex items-center justify-center">
      <div className={"baseLayoutStyles flex flex-row absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-5/6 h-5/6 bg-skulls bg-gray-900 rounded-lg"}>

//--- 5.MODAL IMAGE ---
        <div className={getModalClass(modalBackground)}></div>

        <div className="w-1/2 h-full p-4">
          <button
              onClick={closeModal}
              className="px-4 py-2 bg-fuchsia-900 text-white rounded"
          >
            Close
          </button>
         </div>
      </div>
    </div>
  );
};