как заставить модал выскакивать, пока Google streetview работает в фоновом режиме - PullRequest
Новая
       14

как заставить модал выскакивать, пока Google streetview работает в фоновом режиме

1 голос
/ 25 апреля 2019

Я использую API Карт Google, в частности, вид с улицы.Моя цель - иметь модал, который появляется в режиме просмотра улиц.Я поделюсь кодом, который я использую для модальных, однако они находятся в двух отдельных папках в моем проекте.Кто-нибудь знает, как заставить модал выскакивать при наличии работающей функции в фоновом режиме?(Кстати, я использую модальный компонент из REACT)

Я попытался вызвать компонент "GoogleMApsStreetView", который содержит API Карт Google, прежде чем вызывать компонент "Модальный" 

<div>
        {<GoogleMapsStreetView />}
        <Modal
        className="Modal"
        className="content-Modal"

Нопроисходит то, что модал отображается с фоновым обзором улиц, но только в течение миллисекунды, когда он исчезает, на экране отображается только вид улиц. 

import React, { Component } from "react";
import Modal from 'react-modal';
import GoogleMapsStreetView from "./GoogleMapsStreetView.js";


export default class LevelOne extends Component {

  constructor() {
    super();

    this.state = {
      modalIsOpen: true
    };
  }
    /*this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // to change text color in modal
    //this.subtitle.style.color = '#000000';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }*/

  render() {

    return (
      <div>
        {<GoogleMapsStreetView />}
        <Modal
        className="Modal"
        className="content-Modal"

          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          contentLabel="Example Modal"
        >


          <center><h2 style = {{color: '#444444'}}>Hello Jane!</h2></center>
          <center><button onClick={this.closeModal}>close</button></center>
        </Modal>
      </div>

    );
  }
}
...