model open is working but close function doesn't work in react js

bootstrap modal popup closes automatically
prevent popup from closing when you click outside popup
modal popup opens and closes immediately
bootstrap modal click outside to close
close popup when click anywhere jquery
close popup on click outside angular
close popup on click outside javascript
close modal-dialog on button click javascript

I am working on bootstrap modal openup, when i click on Edit button, it open the bootstrap modal, but when i click on close button it doesn't close the modal, can anyone please check my code, and help me what's issue in it ? Here i have added my code, can anyone please tell me why close modal is not working for that, on close button it calls handleClose() method of Example Class thanks for your help.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Button,OverlayTrigger, Tooltip,Popover} from 'react-bootstrap';



//var Modal = require('react-bootstrap-modal') //require('react-bootstrap-modal')  
var Modal = require('react-bootstrap').Modal;  
//var Button = require('react-bootstrap').Button;  

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

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

    this.state = {
      show: false,
      //popup_index : this.props.popup_index
    };
  }

  handleClose() {
      //alert('sdsd');
      this.setState({ show : false });  
      //this.props.handleShow(this.state.show);
  }

  handleShow() {
      this.setState({ show: this.props.show });
  }  

  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>

        <Modal show={this.props.handleShow} onHide={this.handleClose} >
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {this.props.popup_id} </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>  

            <hr />

            <h4>Overflowing text to show scroll behavior</h4>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}


class PalladiumHub extends React.Component {


  render() {

    return (<tr>
      <td>{this.props.keyuser}</td>
      <td>{this.props.name.name}</td>
      <td><button type="button" onClick={(e) => { this.props.editTask(this.props.index) }} >Edit</button><button onClick={(e) => { this.props.deleteTask(this.props.index) }}>Delete</button></td>
    </tr>
    )
  }
}  

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      isOpen: false,
      show : false,
      popup_index:''
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  toggleModal(index) {
      this.setState({show:true,popup_index:index});    
  }


  deleteTask(index) {
    //alert(index);
    //console.log(index);
    //return false;
    let tasks = this.state.items;

    tasks.splice(index, 1);
    this.setState({
      items: tasks
    })
  }

  editTask(index) {
    this.toggleModal(index);
    //console.log(index);
  }

  render() {
    console.log(this.state.items);
    return (
      <section>
          <table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
            this.state.items.map((data, index) => {
              //return console.log(data.id);
              return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} /> 
            })
          }
          </table>
          <Example handleShow = {this.state.show} popup_id = {this.state.popup_index}  />
      </section>
    );
  }

}

ReactDOM.render(
    <CallCRUD />, document.getElementById('root')  
);

Try making this changes: The change here is : this.handleClose, <Example showModal={this.state.show} popup_id={this.state.popup_index} handleClose={this.handleClose}/>

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      isOpen: false,
      show : false,
      popup_index:''
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  toggleModal(index) {
      this.setState({show:true, popup_index:index});    
  }
  handleClose(){
    this.setState({show: false});
  }

  deleteTask(index) {
    //alert(index);
    //console.log(index);
    //return false;
    let tasks = this.state.items;

    tasks.splice(index, 1);
    this.setState({
      items: tasks
    })
  }

  editTask(index) {
    this.toggleModal(index);
    //console.log(index);
  }

  render() {
    console.log(this.state.items);
    return (
      <section>
          <table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
            this.state.items.map((data, index) => {
              //return console.log(data.id);
              return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} /> 
            })
          }
          </table>
          <Example showModal={this.state.show} popup_id={this.state.popup_index}  handleClose={this.handleClose}/>
      </section>
    );
  }

}

Then to the Example component The Major change here is: <Modal show={this.props.showModal} onHide={this.props.handleClose} >, <Button onClick={this.props.handleClose}>Close</Button>

class Example extends React.Component {


  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>

        <Modal show={this.props.showModal} onHide={this.props.handleClose} >
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {this.props.popup_id} </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>  

            <hr />

            <h4>Overflowing text to show scroll behavior</h4>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

model open is working but close function doesn't work in react js , Try making this changes: The change here is : this.handleClose , <Example showModal={this.state.show} popup_id={this.state.popup_index} handleClose={ this. <Modal show={this.state.showModal} onHide={this.close}> The onHide function simply changes showModal state property. Your modal is shown/hidden based on the parent's state: close(){ this.setState({ showModal: false }); } If you'd like to close the modal from within the modal itself, you can trigger the onHide function defined on the parent via

You are using props data to show/hide your Modal but you are managing state on handleClose so you shoult use this.state.show instead of this.props.show just change the code as below.

Modal works once but afterwards closes immediately every time , I have code that looks as follows: $('a.btn').click(function() @SailorMercury The data- attributes, like <a data-controls-model=""> etc. Does your modal window close as soon as it opens as per the original Issue? Remarks. Closing a workbook from Visual Basic doesn't run any Auto_Close macros in the workbook. Use the RunAutoMacros method to run the Auto_Close macros.. Example. This example closes Book1.xls and discards any changes that have been made to it.

See you are passing this.state.show == true in handleShow.

So, now you need to make this.state.show == false on a close of modal.

To do so, make one function in the CallCRUD component:-

handleModal = () => {
  this.setState({
    show:false  
  }) 
}

Now, pass this function in a property to example component like this:

<Example handleShow = {this.state.show} handleClose={()=>{this.handleModal()}} popup_id = {this.state.popup_index}  />

Next, in Example component under the handleClose function write this:

this.props.handleClose();

modal('show') after a modal('hide') doesn't work � Issue , immediately after hiding a modal, if a show call is issued it doesn't work subscribe the .one('hidden.bs.modal', function(){ open the modal}) and call close () first If a modal tries to open while closing is in progress, the id is saved and when� Get shopping advice from experts, friends and the community! I have a CRAFTSMAN Garage Door Opener Model: 13953513. The problem is the garage door will only open but won't close with remote transmitter. It will only close when I am really close to the antenna or i use the wall control opener. There is no sensor on both sides of the garage since this is an old model . i have change the battery

How to close the modal, <p>In this example we demonstrate how to close the modal by clicking outside of the modal box.</p> class="w3-button w3-black">Open Modal</button> I have Win 7. Usually when I have a new file type I can associate a program to that extension, but recently I am unable to do so. I have a normal midi file (.mid extension) and I try to associate a program to it with the "Open with" function, I choose the program from the list, but after that the "Open with" function forgets my selection.

How To Make a Modal Box With CSS and JavaScript, getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the� The hideModal function sets a flag that it is currently hiding a modal. When it is done it resets the flag. If a modal tries to open while closing is in progress, the id is saved and when closing is complete it shows the modal. This ensures that as long as you call "hideModal" before "showModal", the modal is closed before the next one is opened.

Modal � Bootstrap, Modals are built with HTML, CSS, and JavaScript. They're Clicking on the modal “backdrop” will automatically close the modal. <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" Open modal for @ getbootstrap Alternatively, specify static for a backdrop which doesn't close the modal on click. Lock in place. Loosen the receiving eye wing nut and adjust sensor until it receives the sender’s beam. When the green indicator light glows steadily, tighten the wing nut. So there you have it. If your garage door opens ok but won’t close then it’s possible the safety reversing sensors are not correctly aligned.

Comments
  • <Modal show={this.props.handleShow} onHide={this.handleClose} > change this to: <Modal show={this.state.show} onHide={this.handleClose} >
  • Now model open doesn't working
  • For modal open i have passed the parameter from parent to child, so we need this.props.handleShow
  • Just seeing the second part...would modify and put as an answer hold on
  • Thanks for your help, but can you help me with code