--- a/client/src/components/NotesList.js	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/NotesList.js	Thu Aug 16 22:32:36 2018 +0200
@@ -1,15 +1,21 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
-import { Modal } from 'react-bootstrap';
+import Modal  from 'react-modal';
 import Note from './Note';
 
 class NotesList extends Component {
-
-  state = {
+  constructor(props) {
+    super(props);
+    this.state = {
     editingNote: null,
     noteToDelete: null,
-    showModal: false,
+    modalIsOpen: false,
+    };
+  }
+
+  openModal = () => {
+    this.setState({modalIsOpen: true});
   }
 
   enterEditMode = (note) => {
@@ -22,7 +28,7 @@
 
   confirmDelete = (note) => {
     this.setState({
-      showModal: true,
+      modalIsOpen: true,
       noteToDelete: note
     })
   }
@@ -35,11 +41,21 @@
 
   closeModal = () => {
     this.setState({
-      showModal: false,
+      modalIsOpen: false,
       noteToDelete: null
     })
   }
 
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({
+      modalIsOpen: false,
+      noteToDelete: null
+    });
+  }
+
+
   updateNote = (note, data) => {
     this.props.updateNote(note, data);
   }
@@ -66,14 +82,21 @@
             annotationCategories={this.props.annotationCategories} />
         )}
 
-        <Modal show={this.state.showModal} onHide={this.closeModal}>
-          <Modal.Body>
-            Êtes vous sûr(e) ?
-          </Modal.Body>
-          <Modal.Footer>
-            <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirm</button>
-            <button type="submit" className="btn btn-default btn-lg" onClick={ this.closeModal }>Close</button>
-          </Modal.Footer>
+        <Modal
+        className="Modal__Bootstrap modal-dialog"
+        // closeTimeoutMS={150}
+        isOpen={this.state.modalIsOpen}
+        onRequestClose={this.handleModalCloseRequest}
+        >
+          <div className="modal-content">
+            <div className="modal-body">
+              Êtes vous sûr(e) ?
+            </div>
+            <div className="modal-footer">
+              <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirmer</button>
+              <button type="submit" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+            </div>
+          </div>
         </Modal>
 
       </div>