confirmation message using bootstrap modal

Author: yceruto

app/Resources/assets/js/jquery.confirm_modal.js

@@ -0,0 +1,33 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/**
+ * jQuery plugin for a modal confirmation message.
+ *
+ * @author Yonel Ceruto <[email protected]>
+ */
+(function ($) {
+    $(document).on('submit', 'form[data-confirmation]', function (event) {
+        var $form = $(this),
+            $confirm = $('#confirmationModal');
+
+        if ($confirm.data('result') !== 'yes') {
+            //cancel submit event
+            event.preventDefault();
+
+            $confirm
+                .off('click', '#btnYes')
+                .on('click', '#btnYes', function () {
+                    $confirm.data('result', 'yes');
+                    $form.submit();
+                })
+                .modal('show');
+        }
+    });
+})(window.jQuery);

app/Resources/assets/scss/main.scss

@@ -136,6 +136,19 @@ footer {
     }
 }
 
+// Confirmation Modal Window
+#confirmationModal {
+    .modal-dialog {
+        width: 500px;
+    }
+
+    .modal-footer {
+        button {
+            min-width: 75px;
+        }
+    }
+}
+
 //
 // Forms
 // --------------------------------------------------

app/Resources/translations/messages.en.xliff

@@ -84,6 +84,18 @@
                 <source>action.delete_post_confirmation</source>
                 <target>Are you sure you want to delete this post?</target>
             </trans-unit>
+            <trans-unit id="title.confirmation_modal">
+                <source>title.confirmation_modal</source>
+                <target>Confirmation</target>
+            </trans-unit>
+            <trans-unit id="label.yes">
+                <source>label.yes</source>
+                <target>Yes</target>
+            </trans-unit>
+            <trans-unit id="label.no">
+                <source>label.no</source>
+                <target>No</target>
+            </trans-unit>
             <trans-unit id="action.create_post">
                 <source>action.create_post</source>
                 <target>Create a new post</target>

app/Resources/translations/messages.es.xliff

@@ -88,6 +88,18 @@
                 <source>action.delete_post_confirmation</source>
                 <target>¿Está seguro que quiere eliminar este artículo?</target>
             </trans-unit>
+            <trans-unit id="title.confirmation_modal">
+                <source>title.confirmation_modal</source>
+                <target>Confirmación</target>
+            </trans-unit>
+            <trans-unit id="label.yes">
+                <source>label.yes</source>
+                <target>Sí</target>
+            </trans-unit>
+            <trans-unit id="label.no">
+                <source>label.no</source>
+                <target>No</target>
+            </trans-unit>
             <trans-unit id="action.create_post">
                 <source>action.create_post</source>
                 <target>Crear un nuevo artículo</target>

app/Resources/views/admin/blog/_form.html.twig

@@ -7,7 +7,8 @@
 #}
 
 {% if show_confirmation|default(false) %}
-    {% set attr = {'data-confirmation-message': 'action.delete_post_confirmation'|trans} %}
+    {% set attr = {'data-confirmation': 'true'} %}
+    {{ include('default/_confirmation_modal.html.twig', {'message': 'action.delete_post_confirmation'|trans}) }}
 {% endif %}
 
 {{ form_start(form, { attr: attr|default({}) }) }}

app/Resources/views/base.html.twig

@@ -144,7 +144,8 @@
             {% javascripts filter="?jsqueeze" output="js/app.js"
                 "%kernel.root_dir%/Resources/assets/js/jquery-2.1.4.js"
                 "%kernel.root_dir%/Resources/assets/js/bootstrap-3.3.4.js"
-                "%kernel.root_dir%/Resources/assets/js/highlight.pack.js" %}
+                "%kernel.root_dir%/Resources/assets/js/highlight.pack.js"
+                "%kernel.root_dir%/Resources/assets/js/jquery.confirm_modal.js" %}
                 <script src="{{ asset_url }}"></script>
             {% endjavascripts %}
         #}
@@ -155,15 +156,6 @@
                 $(document).ready(function() {
                     hljs.initHighlightingOnLoad();
                 });
-
-                $(document).on('submit', 'form[data-confirmation-message]', function (event) {
-                    var message = $(this).data('confirmation-message');
-
-                    if (confirm(message) === false) {
-                        //cancel the event
-                        event.preventDefault();
-                    }
-                });
             </script>
         {% endblock %}
 

app/Resources/views/default/_confirmation_modal.html.twig

@@ -0,0 +1,24 @@
+{# Bootstrap modal, see http://getbootstrap.com/javascript/#modals #}
+<div class="modal fade" id="confirmationModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title">{{ 'title.confirmation_modal'|trans }}</h4>
+            </div>
+            <div class="modal-body">
+                {{ message }}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger" id="btnYes" data-dismiss="modal">
+                    {{ 'label.yes'|trans }}
+                </button>
+                <button type="button" class="btn btn-default" id="btnNo" data-dismiss="modal">
+                    {{ 'label.no'|trans }}
+                </button>
+            </div>
+        </div>
+    </div>
+</div>