React Modal - Foundation & Reflux

example.jsx

/** @jsx React.DOM */
var React = require('react');

var ModalAction = require('./ModalAction');

var Modal = require('./Modal');

var Example = React.createClass({
  
  getInitialState: function() {
    return {modalId: 'modal-example'};
  },

  render: function() {
    return (
      <div>
        <h1>Example</h1>
        <button onClick={this.openModal}>Open</button>
        <Modal id={this.state.modalId}>
          <h2>Hello World</h2>
          <button onClick={this.closeModal}>Close</button>
        </Modal>
      </div>
    );
  },
  
  openModal: function() {
    ModalAction.open(this.state.modalId);
  },
  
  closeModal: function() {
    ModalAction.close(this.state.modalId);
  }

});

Modal.jsx

/** @jsx React.DOM */
var React = require('react/addons');
var Reflux = require('reflux');
var cx = React.addons.classSet;

var ModalAction = require('./ModalAction');

var ModalStore = require('./ModalStore');
 
var Modal = React.createClass({

  mixins: [Reflux.ListenerMixin],

  propTypes: {
    id: React.PropTypes.string.isRequired,
  },

  getInitialState: function() {
    return {
      visibility: false
    };
  },

  componentDidMount: function() {
    this.listenTo(ModalStore, this.updateVisibility);
    document.addEventListener('keyup', this.handleDocumentKeyUp);

    ModalAction.register(this.props.id);
  },

  componentWillUnmount: function() {
    document.removeEventListener('keyup', this.handleDocumentKeyUp);

    ModalAction.unregister(this.props.id);
  },

  updateVisibility: function() {
    this.setState({
      visibility: ModalStore.isOpen(this.props.id)
    });
  },

  hide: function() {
    ModalAction.close(this.props.id);
  },

  render: function() {
    var classes = {
      "reveal-modal": true,
      "completed": true,
      "open": this.state.visibility,
      "animatable": true,
      "slide-in-right": true,
      "active": this.state.visibility
    };

    var style = {
      opacity: 1,
      display: this.state.visibility ? "block" : "none",
      "zIndex": 300,
      "pointerEvents": "auto"
    };

    return (
      <span>
        <div onClick={this.handleBackdropClick} className="reveal-modal-bg" style={style}></div>
        <div className={cx(classes)}>
          <a className="close-reveal-modal">&#215;</a>
          {this.props.children}
        </div>
      </span>
    );
  },

  handleBackdropClick: function (e) {
    if (e.target !== e.currentTarget) {
      return;
    }

    this.hide();
  },

  handleDocumentKeyUp: function (e) {
    // Escape
    if (e.keyCode === 27) {
      this.hide();
    }
  }

});

module.exports = Modal;

ModalAction.js

var Reflux = require('reflux');

var ModalAction = Reflux.createActions([
  "register",
  "unregister",
  "open",
  "close",
  "closeAll"
]);

module.exports = ModalAction;

ModalStore.js

var Reflux = require('reflux');

var ModalAction = require('./ModalAction');

var ModalStore = Reflux.createStore({
  init: function() {
    this.modals = {};

    this.listenTo(ModalAction.open, this.open);
    this.listenTo(ModalAction.close, this.close);
    this.listenTo(ModalAction.closeAll, this.closeAll);
    this.listenTo(ModalAction.register, this.register);
    this.listenTo(ModalAction.unregister, this.unregister);
  },

  register: function(id) {
    this.modals[id] = {open: false};

    this.trigger();
  },

  unregister: function(id) {
    if (this.isRegistered(id)) {
      delete this.modals[id];
    }

    this.trigger();
  },

  isRegistered: function(id) {
    return id in this.modals;
  },

  isOpen: function(id) {
    return this.isRegistered(id) && this.modals[id]['open'];
  },

  open: function(id, keepOpen) {
    if (this.isRegistered(id)) {
      this.modals[id]['open'] = true;
    }

    if (!keepOpen) {
      for (var key in this.modals) {
        if (key != id) {
          this.modals[key]['open'] = false;
        }
      }
    }

    this.trigger();
  },

  close: function(id) {
    if (this.isRegistered(id)) {
      this.modals[id]['open'] = false;
    }

    this.trigger();
  },

  closeAll: function() {
    for (var key in this.modals) {
      this.modals[key]['open'] = false;
    }

    this.trigger();
  }
});

module.exports = ModalStore;

style.css

.reveal-modal.open {
  display: block;
  visibility: visible;
}