1 files changed, 76 insertions, 0 deletions
diff --git a/library/cropperjs/examples/cropper-in-modal.html b/library/cropperjs/examples/cropper-in-modal.html
new file mode 100644
index 000000000..a9ce3e80b
--- /dev/null
+++ b/library/cropperjs/examples/cropper-in-modal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Cropper.js</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../dist/cropper.css">
+  <style>
+    .img-container img {
+      max-width: 100%;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="container">
+    <h1>Cropper in a Bootstrap modal</h1>
+
+    <!-- Button trigger modal -->
+    <button type="button" class="btn btn-primary" data-target="#modal" data-toggle="modal">
+      Launch the demo
+    </button>
+
+    <!-- Modal -->
+    <div class="modal fade" id="modal" role="dialog" aria-labelledby="modalLabel" tabindex="-1">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modalLabel">Cropper</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="img-container">
+              <img id="image" src="../docs/images/picture.jpg" alt="Picture">
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
+  <script src="../dist/cropper.js"></script>
+  <script>
+    window.addEventListener('DOMContentLoaded', function () {
+      var image = document.getElementById('image');
+      var cropBoxData;
+      var canvasData;
+      var cropper;
+
+      $('#modal').on('shown.bs.modal', function () {
+        cropper = new Cropper(image, {
+          autoCropArea: 0.5,
+          ready: function () {
+
+            // Strict mode: set crop box data first
+            cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
+          }
+        });
+      }).on('hidden.bs.modal', function () {
+        cropBoxData = cropper.getCropBoxData();
+        canvasData = cropper.getCanvasData();
+        cropper.destroy();
+      });
+    });
+  </script>
+</body>
+</html>