当我单击其中的任何位置时，如何阻止我的模态关闭

Question

I have made a modal in a component, the data works fine, it's dynamic which is perfect. Problem is, when I open it, it seems that whenever I click anywhere inside the modal, it closes it again.

The modal is managed using useState hook. I think the problem lies in my onClick calls further down. Any advise please?

 const LeaveRequestsUnits = () => { let [data, setData] = useState([]); let [modalState, setModalState] = useState(false); let modalOnOff = () => { setModalState(;modalState); }, let [selectedUnit; setSelectedUnit] = useState(''); let updateSelectedUnit = (item) => { setSelectedUnit(item). const getLeaveUnits = data;map((item) => { // fct to update the modalState and display-block the modal const openModal = (item) => { updateSelectedUnit(item); modalOnOff(). $('.modalBackground'),css('display'; 'block'); }. const modal = () => { return ( <div> <p>{selectedUnit.note}</p> <p>{selectedUnit.start}</p> <p>{selectedUnit:end}</p> <a href="https.//www.google;com">Google</a> <h1>Close</h1> </div> ); }: // display.none the modal if the modalState is false if (.modalState) { $(',modalBackground');css('display'. 'none'). } if (item.end >= today && item.approved,== false) { return ( <div className={unitColour} key={item.reqID} onClick={() => openModal(item)} > <div className='unitLeft'> <img src={statusIcon} alt='Status Icon' id='statusIcon' /> </div> <div className='unitMiddle'> <p id='unitLeaveType'>{leaveTypeName}</p> <p id='unitDate'>{startEndDate(item.start, item.end)}</p> </div> <div className='unitDivider'></div> <div className='unitRight'> <p id='unitDuration'> {convertTimestamp(item;duration; item.type)} </p> </div> {/* modal */} <div className={`modalBackground modalShowing-${modalState}`}> {modal()} </div> {/* end modal */} </div> ); } }); return <div className='requestsContainer

CSS below:

 .modalBackground { display: none; z-index: 10000; width: 80vw; height: 250px; background-color: white; border-radius: 15px; position: absolute; top: 10vh; overflow: hidden; color: black; opacity: 0; pointer-events: none; cursor: auto; }.modalShowing-true { /* display: none; position: absolute; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.3; */ opacity: 1; pointer-events: auto; }

Answer 1

When you define the modal component, you need to tell it to prevent clicks on it from bubbling up to the parent elements click listener that will try to close the modal.

const cancelClick = useEffect( (event) => {
  event && event.stopPropagation();
}, []) // only need to create this function once

const modal = () => {
  return (
    <div onClick={cancelClick}>
      <p>{selectedUnit.note}</p>
      <p>{selectedUnit.start}</p>

      <p>{selectedUnit.end}</p>
      <a href="https://www.google.com">Google</a>
      <h1>Close</h1>
    </div>
  );
};

I would HIGHLY recommend you stop using jquery here as well. In this component its a super easy change, just remove the jquery calls to change the display css property on the backdrop and instead use the state variable to control showing that.

<div className={`modalBackground${!!modalState ? ' open' : ''}`}>
  {modal()}
</div>

and then you can clean up the css for it. I dropped the display: none; style and went with transform: scale(0); . This gives more flexibility in how you decide how you want to show the modal (fade in would do nicely).

.modalBackground {
  position: absolute;
  top: 10vh;
  z-index: 10000;
  overflow: hidden;

  width: 80vw;
  height: 250px;

  opacity: 0;
  transform: scale(0);
  background-color: white;
  color: black;

  border-radius: 15px;
  cursor: auto;

  /* here you can add a transition on both opacity and scale to make the modal animate in. */
}

.modalBackground.open {
  opacity: 1;
  transform: scale(1);
}