Bootstrap modal in React is not opening

Asked
Active3 hr before
Viewed126 times

8 Answers

bootstrapmodalreact
90%

The main issue causing this behavior is that the backdrop has the class "fade" applied correctly, but the same class is applied to the modal too. Making the modal invisible.,As we cannot remove "react-bootstrap" for using modal. So try to remove other css. This fixed the issue for me.,To overcome this, forcefully override the opacity that is being set by the "fade" class.

To overcome this, forcefully override the opacity that is being set by the "fade" class.

<Modal style={{opacity:1}}> </Modal>
load more v
88%

Use Modal.<component> syntax to display each component. If you would prefer not to use the object literal syntax when defining you modals, you can import each component separately as well.,For more details about styling react components, check out the course Styling React Components by Jake Trent. This guide will introduce you to react-bootstrap.,Please keep an eye out for more guides, where I will show you how to use bootstrap components within a react application. Thanks for reading 😃

1 yarn add react - bootstrap bootstrap
2 # or
3n pm i react - bootstrap bootstrap
load more v
72%

The text was updated successfully, but these errors were encountered: ,Can I contribute to this issue if its open?, Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

class Parent extends Component {
 constructor() {
  super();
  this.state = { 
    modalVisible: false
  }
 }

 toggleModal = () => {
    this.state.modalVisible
      ? this.setState({
        modalVisible: false
      })
      : this.setState({ modalVisible: true });
  };


 render() {
  <div onClick={() => this.toggleModal()}>Contact Us<div>
  <Modal modalVisible={this.state.modalVisible} />
 }
}
load more v
65%

This works great, but it’s self-contained. The button is part of the Modal code. What if we want to open the modal from React-Bootstrap’s Tab component?,… so now we have a component, Example, that imports the Modal functionality from React Bootstrap and contains the sample code from the component as presented on the React-Bootstrap website. The code to open the Modal are the 3 lines right after the return:,Select the components you’d like to use from their site and then, in your code, import each component you plan on using individually. In the case of the Modal:

To install React-Bootstrap, use npm:

npm install react - bootstrap bootstrap
load more v
75%

Unlike vanilla Bootstrap, autoFocus works in Modals because React handles the implementation.,When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.,A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.

<Modal.Dialog>
   <Modal.Header closeButton>
      <Modal.Title>Modal title</Modal.Title>
   </Modal.Header>
   <Modal.Body>
      <p>Modal body text goes here.</p>
   </Modal.Body>
   <Modal.Footer> <Button variant="secondary">Close</Button> <Button variant="primary">Save changes</Button> </Modal.Footer>
</Modal.Dialog>
load more v
40%

We can use the useState() hooks to open/close a react-bootstrap modal . The useState function is a built in hook that allows us to add state to a functional component without switching to a class component.Syntax:,Installed react-bootstrap:  ,Import built-in hook useState:

We can use the useState() hooks to open/close a react-bootstrap modal . The useState function is a built in hook that allows us to add state to a functional component without switching to a class component.
Syntax:

const [state, setState] = useState(initialState);
npm install react - bootstrap bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import React, {
   useState
} from "react";
import Button from 'react-bootstrap/Button';
load more v
22%

Accessible modal dialog component for React.JS,Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:,github.com/reactjs/react-modal

To install, you can use npm or yarn:

$ npm install--save react - modal
$ yarn add react - modal
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};

// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement');

function App() {
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
        <button onClick={closeModal}>close</button>
        <div>I am a modal</div>
        <form>
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
      </Modal>
    </div>
  );
}

ReactDOM.render(<App />, appElement);
load more v
60%

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.,Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.,Clicking on the modal “backdrop” will automatically close the modal.

$('#myModal').on('shown.bs.modal', function() {
   $('#myInput').trigger('focus')
})
load more v

Other "bootstrap-modal" queries related to "Bootstrap modal in React is not opening"