2. Algorithm
  3. javascript - ReactJS, Show Modal on Top of Another Modal - Stack Overflow

javascript - ReactJS, Show Modal on Top of Another Modal - Stack Overflow

admin2025-04-22  1

I am trying to display a modal ponent on top on another modal ponent. When a button inside class ChannelDetail (first modal) is clicked, another modal is supposed to open on top (class Modal). However, it is opening behind the first modal and the states from the first modal is not properly being passed to the second modal. How can I get the second modal to open properly with the proper props?

import React, { Component } from 'react'
import './style.css'
import { ExcelRenderer} from 'react-excel-renderer';
import Modal from './Modal'

export class ChannelDetail extends Component {

    state = { rows: [], cols: [], outage: '', d: 'ande' };

    showOutageFiles = (e) => {
      e.preventDefault(); 
      this.setState({ outage: e.target.value })
      document.querySelector('.bg-modal-outage').style.display = 'block';
    }

    fileHandler = (event) => {
        let fileObj = event.target.files[0];
        //just pass the fileObj as parameter
        ExcelRenderer(fileObj, (err, resp) => {
          if(err){
            console.log(err);            
          } else{
            this.setState({
              cols: resp.cols,
              rows: resp.rows
            });
          }
        });               
    }

    render() {
      const { channelSelectedData } = this.props
       if (this.props.channelSelectedData.length >= 1 && this.props.datatype != 'slar'){         
            return(
              <div>
                <div> <Modal data={this.state.outage} type={this.state.d}/> </div>
                <div className="channel-detail-box">
                      <p>Channel Selected: {this.props.channelSelectedData[0].channel}</p>
                      <p>Inspected: {this.props.channelSelectedData.length} time(s)</p>
                      <p>Last Inspection Date: {this.props.channelSelectedData[0].scanned}</p>
                      <p>Outages: {channelSelectedData.map(({ outage }) => <button value={outage} onClick={this.showOutageFiles}>{outage + ', '}</button>)}</p>
                </div>      
              </div>
            )
        } else {
            return (
                <div>
                    <p>No data found</p>
                </div>
            )
        }
    }
}

export default ChannelDetail



import React, { Component } from 'react'
import './style.css'

export class Modal extends React.Component {

    // closes modal for outage files 
    hideOutageFile = () => {
        document.querySelector('.bg-modal-outage').style.display = 'none';
    }

    render () {

         // ANDE reports linked on the outage modal popup
         const reportsANDE = {
            'P1-1987': 'http://192.168.191.128:8080/P-IR-1-03650-1_R000(P1-1987).pdf',
            'P1-1992': 'http://192.168.191.128:8080/PA-IR-92-1-03640-31_R001(P1-1992).pdf',
            'P0211': 'http://192.168.191.128:8080/NA44-IR-03641-00001_R001(P0211).pdf',
            'P1011': 'http://192.168.191.128:8080/NA44-IR-31100-00002.pdf',
        }

        // ANDE excel files linked on the outage modal popup
        const excelANDE = {
            'P1-1987': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1-1992': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P0211': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
        }

        const prop = 'text-align';
        const textStyle = { [prop]: 'center' };
        console.log(this.props.data)

        // Modal popup for downloading ANDE outage files
        if (this.props.type === 'ande'){
            return (
                <div className="bg-modal-outage">
                    <div className="modal-outage-content">
                        <span className="close-Btn" onClick={this.hideOutageFile}>&times;</span>
                        <h2 style={textStyle}>{this.props.data}</h2>
                        <p> 
                            <a href={excelANDE[this.props.data]}>Download Spreadsheet <i class="fas fa-file-excel"></i></a> <br/> 
                            <a href={reportsANDE[this.props.data]}> Download Report <i class="fas fa-file-pdf"></i></a>
                        </p> 
                    </div>
                </div> 
            )
        }
    }
}

export default Modal

I am trying to display a modal ponent on top on another modal ponent. When a button inside class ChannelDetail (first modal) is clicked, another modal is supposed to open on top (class Modal). However, it is opening behind the first modal and the states from the first modal is not properly being passed to the second modal. How can I get the second modal to open properly with the proper props?

import React, { Component } from 'react'
import './style.css'
import { ExcelRenderer} from 'react-excel-renderer';
import Modal from './Modal'

export class ChannelDetail extends Component {

    state = { rows: [], cols: [], outage: '', d: 'ande' };

    showOutageFiles = (e) => {
      e.preventDefault(); 
      this.setState({ outage: e.target.value })
      document.querySelector('.bg-modal-outage').style.display = 'block';
    }

    fileHandler = (event) => {
        let fileObj = event.target.files[0];
        //just pass the fileObj as parameter
        ExcelRenderer(fileObj, (err, resp) => {
          if(err){
            console.log(err);            
          } else{
            this.setState({
              cols: resp.cols,
              rows: resp.rows
            });
          }
        });               
    }

    render() {
      const { channelSelectedData } = this.props
       if (this.props.channelSelectedData.length >= 1 && this.props.datatype != 'slar'){         
            return(
              <div>
                <div> <Modal data={this.state.outage} type={this.state.d}/> </div>
                <div className="channel-detail-box">
                      <p>Channel Selected: {this.props.channelSelectedData[0].channel}</p>
                      <p>Inspected: {this.props.channelSelectedData.length} time(s)</p>
                      <p>Last Inspection Date: {this.props.channelSelectedData[0].scanned}</p>
                      <p>Outages: {channelSelectedData.map(({ outage }) => <button value={outage} onClick={this.showOutageFiles}>{outage + ', '}</button>)}</p>
                </div>      
              </div>
            )
        } else {
            return (
                <div>
                    <p>No data found</p>
                </div>
            )
        }
    }
}

export default ChannelDetail



import React, { Component } from 'react'
import './style.css'

export class Modal extends React.Component {

    // closes modal for outage files 
    hideOutageFile = () => {
        document.querySelector('.bg-modal-outage').style.display = 'none';
    }

    render () {

         // ANDE reports linked on the outage modal popup
         const reportsANDE = {
            'P1-1987': 'http://192.168.191.128:8080/P-IR-1-03650-1_R000(P1-1987).pdf',
            'P1-1992': 'http://192.168.191.128:8080/PA-IR-92-1-03640-31_R001(P1-1992).pdf',
            'P0211': 'http://192.168.191.128:8080/NA44-IR-03641-00001_R001(P0211).pdf',
            'P1011': 'http://192.168.191.128:8080/NA44-IR-31100-00002.pdf',
        }

        // ANDE excel files linked on the outage modal popup
        const excelANDE = {
            'P1-1987': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1-1992': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P0211': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
        }

        const prop = 'text-align';
        const textStyle = { [prop]: 'center' };
        console.log(this.props.data)

        // Modal popup for downloading ANDE outage files
        if (this.props.type === 'ande'){
            return (
                <div className="bg-modal-outage">
                    <div className="modal-outage-content">
                        <span className="close-Btn" onClick={this.hideOutageFile}>&times;</span>
                        <h2 style={textStyle}>{this.props.data}</h2>
                        <p> 
                            <a href={excelANDE[this.props.data]}>Download Spreadsheet <i class="fas fa-file-excel"></i></a> <br/> 
                            <a href={reportsANDE[this.props.data]}> Download Report <i class="fas fa-file-pdf"></i></a>
                        </p> 
                    </div>
                </div> 
            )
        }
    }
}

export default Modal
  • javascript
  • reactjs
  • modal-dialog
  • state
Share Improve this question asked Nov 5, 2020 at 15:29 saima msaima m 591 silver badge7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

Suggestion

try using z-index

link enter link description here

Your .bg-modal-outage ponent could receive a property that is passed through

<Modal data={this.state.outage} type={this.state.d}/> </div>.

Something like:

<Modal data={this.state.outage} type={this.state.d} isActive={yourClickEvent}/> </div>

And in the Modal ponent use something like

<div className="bg-modal-outage" style={{ display: isActive ? "block" : "none" }}>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745268661a293439.html

javascriptReactJS

Show Modal on Top of Another ModalStack Overflow

最新回复(0)