Bootstrap modales Verhalten in React

Question

Ich handle das Bild klicken Sie auf ein Objekt, um eine Pop-up-Box anzuzeigen. Das ist mein Code.

<a href="#" onClick={this.handleClick} data-id={image.id}> 

Dies ist meine handleClick-Methode.

handleClick(event) { 
     event.preventDefault(); 
     let mediaId = event.currentTarget.attributes['data-id'].value; 
     this.setState({overlay: <Overlay mediaId={mediaId}/>}); 
     } 

Dies ist die relevante CSS

.overlay { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    height: 300px; 
    width: 500px; 
    background-image: linear-gradient(to top right, #7282fb, #755bf9, #7934f7); 
    box-shadow: 10px 10px 20px gray; 

} 

Ich will das Pop-up in die Seite von oben gleiten, so etwas wie ein Bootstrap-modal.

Auch ich möchte diese Überlagerung gehen, wenn ich irgendwo außerhalb der Box klicke.

Wie kann ich dies erreichen? Danke.

Answer 1

Sieht so aus, als müssten Sie eine Bibliothek verwenden, um das gewünschte Verhalten zu archivieren. Es gibt einige für React, kann durch "modale", "Overlay" Keywords gefunden werden. Es gibt viele Alternativen. Schauen Sie sich https://github.com/fckt/react-layer-stack an (Alternativen finden Sie auch unter https://github.com/fckt/react-layer-stack#alternatives). Es löst Ihren Fall perfekt. Demo und Beispiele - https://fckt.github.io/react-layer-stack/