Modal does not open when it is close clicking outside

Ionic Framework Ionic React
1

Hello.

The following modal does not have a size that occupies the screen and when you click outside of it it is not possible to open it again. It can only be reopened if they are closed with IonIcon. How is it possible to fix this?

  export const ModalExample: React.FC = () => {
    const [showModal, setShowModal] = useState(false);
  
    return (
      <div>
        <IonModal isOpen={showModal} cssClass='my-custom-class' animated={true}>
        <IonIcon icon={closeCircle} onClick={() => setShowModal(false)}></IonIcon>
          <div id="contenedor-central" >
          <strong>Usuario no registrado</strong>
          </div>
          <IonButton onClick={() => setShowModal(false)}>Registrarse</IonButton>
        </IonModal>
        <IonChip onClick={() => setShowModal(true)} id="foto-usuario" >
          <IonIcon icon={person}/>
        </IonChip>
      </div>
    );
  };
1 Like
2

change the line to

<IonModal isOpen={showModal} cssClass='my-custom-class' 
    animated={true}
     onDidDismiss={()=>setShowModal(false)} />
3

Thanks sir. That works! Can I make you other question? How Can I make a modal scrollable? Because I have a list in it (in the modal) and it does not show all.

4

open another question and show some code please, but my first guess is that you list is not inside of IonContent?

5

You are right. Im going to open a new question. Thanks sir.