CODEWITHSUNDEEP
javascriptreactjsbootstrap-modal
PokemonTrainer555
PokemonTrainer555

Reputation: 53

Open modal on function call

I have an js file with a function Example. I'm calling that function in another func bellow. What I need right now is to have my modal opened without button clicked. It works perfectly on button clicked, but its not what i need in my situation. Any solution how can I display this modal on function call without clicking on this button?

function Example() {

  return (
    <>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
      </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

Upvotes: 1

Views: 3222

Answers (3)

PokemonTrainer555
PokemonTrainer555

Reputation: 53

I've solved the problem by using React Hooks. Thank you for replies. Happy hacking :)

function Example() {
  const [show, setShow] = useState(true);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Upvotes: 0

prasid444
prasid444

Reputation: 355

$("#exampleModal").modal('show');

Try calling this in a function which shows the modal. Also don't forget to import . jquery before calling this function. You can import jquery in main page and all will work fine

Upvotes: 2

Abhay Maurya
Abhay Maurya

Reputation: 12277

Just define a state variable, lets call it showModal, initialize it with false and then in your code show or hide modal based upon showModal is true or false.

That way when you want to show it "manually", all you need to do is toggle that showModal to true like so:

this.setState({showModal: true});

You need some knowledge of react in order to understand my answer though :)

Upvotes: 1

Related Questions