reactjs/react-modal

import React, { Component } from 'react';
import Modal from 'react-modal';

const MODAL_A = 'modal_a';
const MODAL_B = 'modal_b';

const DEFAULT_TITLE = 'Default title';

class Forms extends Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
  }

  toggleModal = event => {
    console.log(event);
    const { isOpen } = this.state;
    this.setState({ isOpen: !isOpen });
  }

  render() {
    const { isOpen } = this.state;

    return (
      <div>
        <button className="btn btn-primary" onClick={this.toggleModal}>Open Modal</button>
        <Modal
          id="modal_with_forms"
          isOpen={isOpen}
          closeTimeoutMS={150}
          contentLabel="modalB"
          shouldCloseOnOverlayClick={true}
          onRequestClose={this.toggleModal}
          aria={{
            labelledby: "heading",
            describedby: "fulldescription"
          }}>
          <h1 id="heading">Forms!</h1>
          <div id="fulldescription" tabIndex="0" role="document">
            <p>This is a description of what it does: nothing :)</p>
            <form>
              <fieldset>
                <input type="text"  />
                <input type="text"  />
              </fieldset>
              <fieldset>
                <legend>Radio buttons</legend>
                <label>
                  <input id="radio-a" name="radios" type="radio" /> A
                </label>
                <label>
                  <input id="radio-b" name="radios" type="radio" /> B
                </label>
              </fieldset>
              <fieldset>
                <legend>Checkbox buttons</legend>
                <label>
                  <input id="checkbox-a" name="checkbox-a" type="checkbox" /> A
                </label>
                <label>
                  <input id="checkbox-b" name="checkbox-b" type="checkbox" /> B
                </label>
              </fieldset>
              <input type="text" />
            </form>
          </div>
        </Modal>
      </div>
    );
  }
}

export default {
  label: "Modal with forms fields.",
  app: Forms
};