How to display a confirm box before submitting a form? On the node/%/edit form, when the user clicks the Submit button, I want to show a simple pop-up box with the text "Are you sure you want to save your changes?". When the user clicks Cancel (or No) then nothing happens. If the user clicks Ok (or Yes) then the form gets submitted.

I already tried out the A's in the following related Q's:


How to display confirm box before submitting an AJAX form in Drupal 7? but they already seem to assume the form has been AJAXified. I'm starting from scratch.
How to add a confirm dialog to node add and edit forms? is too complex since it adds extra validation options based on the user's input.
Use a custom JS modal to confirm changes made on node add/edit form before submit seems to be close but like the comments say: it doesn't actually work.


I also read some other A's that used the Rules module but that is totally overkill.
confirm_popup.info

name = Confirm Popup
description = Adds a confirm popup when saving all nodes.
package = custom
version = 7.x-1.0
core = 7.x
dependencies[] = jquery_update
dependencies[] = overlay


confirm_popup.module

&lt;?php

/*
 * Implements hook_form_BASE_FORM_ID_alter()
 */
function confirm_popup_form_node_form_alter(&amp;$form, &amp;$form_state, $form_id) {

  $content_type = $form['#node']-&gt;type;
  if ($content_type == 'article') {

    $form['#attached']['js'][] = drupal_get_path('module', 'mymodule') . '/js/confirm-popup.js';
    $form['#attached']['css'][] = drupal_get_path('module', 'mymodule') . '/css/confirm-popup.css';

  }

}


js/confirm-popup.js

(function($) {
Drupal.behaviors.confirmPopUp = {
  attach: function (context, settings) {

    $(document).ready(function() {

      $("#edit-submit").attr("type", "fake");    
      $("#edit-submit").attr("id", "fake");

      $(document).on("click", "#fake", function(){
        var box = $("&lt;div class='popup-box'&gt;&lt;b&gt;Are you sure you want to save your changes?&lt;/b&gt;&lt;div class='btns-wrapper'&gt;&lt;span class='save-btn'&gt;Save&lt;/span&gt;&lt;span class='cancel-btn'&gt;Cancel&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;");

        $("#overlay-content").prepend('&lt;div class="blackbg"&gt;&lt;/div&gt;').prepend(box);
        $("#overlay-content").addClass('transbg');
        $("#overlay-titlebar").prepend('&lt;div class="blackbg"&gt;&lt;/div&gt;');
      });

      $(document).on("click", ".save-btn", function(){
        $('#fake').attr("type","submit");         
        $('#fake').attr("id","edit-submit");
        $('#edit-submit')[0].click();
      });

      $(document).on("click", ".cancel-btn", function(){
        $(".blackbg").remove();
        $(".popup-box").remove();
      });

    });

  }
};
})(jQuery);


css/confirm_popup.css

.blackbg { 
   height: 100%;
   width: 100%;
   position: absolute;
   overflow: hidden;
   z-index: 10;
   background-color: rgba(0, 0, 0, 0.5);
}
.transbg{
   background-color: rgba(0, 0, 0, 0.0) !important;
}

.popup-box{
  width: 350px;
  height: 120px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 20;
  background-color: white;
  padding: 10px;
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Lucida Grande", Verdana, sans-serif;
  line-height: 1.2em;
}

.btns-wrapper{

   position: absolute;
   bottom: 15px;
   text-align: center;
   font-size: 15px;
   display: block;
   margin: auto;

}

.save-btn, 
.cancel-btn{
  padding: 10px;
  width: 70px;
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
}

.save-btn{
  background-color: #6bc711;
  margin-right: 10px;
}

.cancel-btn{
  background-color: red;
}

#fake{
  width: 34px;
}


Result