webentwicklung-frage-antwort-db.com.de

reakt-modales Dynamic Sizing

Ich benutze Reakt-Modal , was ziemlich großartig ist. Ist es möglich, es dynamisch zu skalieren (vielleicht mit css media tag)? Zum Beispiel,

  1. Bei großen Bildschirmen nimmt der Modal nur einen kleinen Bereich des Bildschirms ein (max. Breite 200px;
  2. Bei einem mittleren Bildschirm nimmt der Modal den Großteil des Bildschirms ein (80% der Bildschirmbreite und -höhe)
  3. Bei einem mobilen Gerät sind 100% der Breite und Höhe erforderlich.
6
user172902

Schauen Sie sich diesen Code an, der sich auf Sie vorbereitet.

ReactModal.setAppElement('#main');

class ExampleApp extends React.Component {
  constructor () {
    super();
    this.state = {
      showModal: false
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal 
           isOpen={this.state.showModal}
           contentLabel="onRequestClose Example"
           onRequestClose={this.handleCloseModal}
           className="Modal"
           overlayClassName="Overlay"
        >
          <p>Modal text!</p>
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

const props = {};

ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))

Kasse in responsiver Ansicht: 

https://codepen.io/ene_salinas/full/yRGMpG/

Checkout vollständigen Code:

https://codepen.io/ene_salinas/pen/yRGMpG

Yellow color = large screen
Green color = medium screen
Gray color = Mobile

Vergiss diese Meta nicht:

"<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">"

Glückliche Kodierung.

1
ene_salinas

Ich benutze die Bibliothek auch in einem meiner Projekte, in dem ich die folgenden Styling-Regeln für das Modal entwickelte:

.ReactModal__Overlay {
    z-index: 99;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.75);
}

.ReactModal__Content {
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    top: 2.5rem;
    bottom: 2.5rem;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,97,0.5);
    overflow: auto;
    border-radius: 4px;
    outline: none;
}

Um die gewünschten Ergebnisse zu erzielen, müssen Sie die absolute Positionierung anpassen.

1. large screen, modal max-width 200px
@media screen and (min-width: 900px) {
    max-width: 200px;
    left: calc(50% - 100px);
}

2. medium screen, modal about 80% screen width
@media screen and (min-width: 475px) and (max-width: 900px) {
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

3. mobile screen, modal full width
@media screen and (max-width: 475px) {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
0
Niels de Bruin

Es ist besser, calc wegen IE-Unterstützung nicht zu verwenden.

..ReactModal__Overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 999;
}

// this is better to use transform for center the modal and width 
.ReactModal__Content {
    position: absolute; // if it's inside your ReactModal__Overlay if not use Fixed and a higher z-index.
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    overflow: auto;
    background-color: #fff;
    -webkit-transform: translate(-50,-50%);
    transform: translate(-50,-50%);
}

@media screen and (min-width: 992px) { // desktop
    .modal.modal-content {
        max-width: 200px;
        max-height: 80%;
    }
}

@media screen and (min-width: 426px) and (max-width: 991) { // tablet size
    .modal.modal-content {
        max-width: 80%;
        max-height: 80%;
    }
}

@media screen and (max-width: 425px) { // mobile size
    .modal.modal-content {
        max-width: 100%;
        max-height: 100%;
    }
}
0
Sajad Jafari