Merge pull request #3662 from awwester/ticket_3228

#3228 - add confirm modal for delete
encode · Dec 1, 2015 · d2f90fd · d2f90fd
2 parents 832d632 + 6d1ed85
commit d2f90fd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
@@ -227,3 +227,8 @@ body a:hover {
   width: 20px;
   margin-top: 3px;
 }
+
+.modal-footer form {
+  margin-left: 5px;
+  margin-right: 5px;
+}
diff --git a/rest_framework/templates/rest_framework/base.html b/rest_framework/templates/rest_framework/base.html
@@ -1,6 +1,7 @@
 {% load staticfiles %}
 {% load rest_framework %}
 {% load i18n %}
+
 <!DOCTYPE html>
 <html>
 <head>
@@ -101,9 +102,24 @@
         {% endif %}
 
         {% if delete_form %}
-          <form class="button-form" action="{{ request.get_full_path }}" data-method="DELETE">
-            <button class="btn btn-danger js-tooltip" title="Make a DELETE request on the {{ name }} resource">DELETE</button>
-          </form>
+          <button class="btn btn-danger button-form js-tooltip" title="Make a DELETE request on the {{ name }} resource" data-toggle="modal" data-target="#deleteModal">DELETE</button>
+
+          <!-- Delete Modal -->
+          <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-body">
+                  <h4 class="text-center">Are you sure you want to delete this {{ name }}?</h4>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                  <form class="button-form" action="{{ request.get_full_path }}" data-method="DELETE">
+                    <button class="btn btn-danger">Delete</button>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
         {% endif %}
 
         {% if filter_form %}