React中点击TopNav下拉菜单About项触发Modal的实现问题

Let's break down and solve your two key problems: getting the dropdown's "About" item to trigger the modal, and making sure the modal displays centered on the screen instead of being confined to the dropdown container.

Step 1: Clean Up Duplicate State Definitions #

First, your TopNav component has multiple conflicting state declarations (you defined state in the constructor, then again twice separately). This causes unexpected behavior. Let's merge all state properties into one place:

// In TopNav.js constructor
constructor() {
  super();
  this.state = { 
    isShowing: false,
    dropdown: false
  }
}

Remove the standalone state = { dropdown: false }; and state = { show: false, } lines – they're overriding the constructor's state.

Step 2: Make the Dropdown's "About" Item Trigger the Modal #

Right now, your "About" is a Link that routes to /about. Let's replace that with a click handler that opens the modal instead:

// Inside the dropdown <ul> in TopNav.js
// Replace this:
<Link to="/about">
  <li>About</li>
</Link>

// With this:
<li onClick={this.openModalHandler} style={{cursor: 'pointer'}}>About</li>

Adding cursor: 'pointer' makes it clear the item is interactive.

Step 3: Move the Modal Outside the Dropdown Container #

The modal is currently nested inside the dropdown <ul>, which has implicit relative positioning and overflow constraints. Move it to the root of your TopNav component so it's not trapped:

// In TopNav.js render() method, inside the <nav> tag (after the <ul className="right-top">)
<ul className="right-top">
  {/* ... existing right-top content ... */}
</ul>

{/* Move the AboutModal here, outside the dropdown */}
{this.state.isShowing ? <div onClick={this.closeModalHandler} className="back-drop"></div> : null}
<AboutModal 
  show={this.state.isShowing} 
  close={this.closeModalHandler}
>
  This is text for the modal dialog. Now it will display in the center of the screen!
</AboutModal>

Also remove the old back-drop and AboutModal code from inside the dropdown – we don't need duplicates.

Step 4: Adjust Modal CSS for Centered Display #

Your current modal uses margin: 100px auto which fails if the parent has positioning constraints. Let's update the CSS to fix this:

/* In AboutModal.css */
.modal-wrapper {
  background: white;
  border: 1px solid #d0cccc;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
  /* New positioning to center on screen */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* Start scaled down for smooth animation */
  opacity: 0;
  transition: all .3s ease;
  width: 75%;
  z-index: 1000; /* Ensure it sits above other content */
}

/* Update styles for when modal is visible */
.modal-wrapper.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

Then update your AboutModal.js to use the show class instead of inline styles (cleaner and more maintainable):

// In AboutModal.js
const modal = (props) => {
  return (
    <div>
      <div className={`modal-wrapper ${props.show ? 'show' : ''}`}>
        <div className="modal-header">
          <h3>About TowTech Web</h3>
          <span className="close-modal-btn" onClick={props.close}>×</span>
        </div>
        <div className="modal-body">
          <p>{props.children}</p>
        </div>
        <div className="modal-footer">
          <button className="btn-cancel" onClick={props.close}>CLOSE</button>
          <button className="btn-continue">LEARN MORE</button>
        </div>
      </div>
    </div>
  )
}

Final Notes #

• The back-drop covers the entire screen, so clicking anywhere outside the modal will close it (your existing handler already handles this).
• The z-index: 1000 ensures the modal sits above other UI elements – adjust this if needed based on your app's stacking context.
• We replaced inline transform/opacity styles with a CSS class to avoid conflicts with the centering transform and keep code organized.

After these changes, clicking the "About" item in your dropdown will trigger the modal, and it will display perfectly centered on the screen, no longer confined to the dropdown area.

内容的提问来源于stack exchange，提问作者Johnne