How to show a popup modal on page load in React js functional component.basically when the page loads the popup or modal should be visible automatically without any click

CodePudding user response：

Most modals will have a prop to specify whether or not the modal should be open. You can simply set this to true on initialization.

Consider an example using a Dialog from the React UI library MUI:

const SimpleDialog = (props) =>
{
  const [open, setOpen] = useState(true)

  return (
    <Dialog open = {open}>
      <DialogTitle>Title</DialogTitle>
      <DialogContent>...</DialogContent>
    </Dialog>
  )
}

The open prop of the Dialog is based on the value of the state variable, which is initialized as true. You can change this value as needed through various Dialog actions. To learn more about MUI Dialogs, see the docs.

For information on useState, see the React docs.

CodePudding user response：

class App extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        modalState: true
    };

    this.handleShow = this.handleShow.bind(this);
}

handleShow() {
    this.setState({ modalState: !this.state.modalState });
}

render() {
    return (
        <div>
            <div className={"modal fade"   (this.state.modalState ? " show d-block" : " d-none")} tabIndex="-1" role="dialog">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">My Profile</h5>
                            <button type="button" className="close" onClick={this.handleShow}>
                                <span>&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">...</div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" onClick={this.handleShow}>Close</button>
                            <button type="button" className="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

}

ReactDOM.render(, document.getElementById('root'));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">