フォームを送信する前に確認ボックスを表示するにはどうすればよいですか？

Question

node/%/editフォームで、ユーザーが[送信]ボタンをクリックしたときに、「変更を保存してよろしいですか？」というテキストを含む簡単なポップアップボックスを表示したいと思います。ユーザーがCancel（またはNo）をクリックしても何も起こりません。ユーザーがOk（またはYes）をクリックすると、フォームが送信されます。

私はすでに次の関連するQでAを試しました。

• AJAXフォームをDrupal 7？ =で送信する前に確認ボックスを表示する方法が、フォームがAJAX化されていると想定しているようです。私はゼロから始めています。
• ノードの追加および編集フォームに確認ダイアログを追加する方法 これは、ユーザーの入力に基づいて検証オプションを追加するため、複雑すぎます。
• カスタムJSモーダルを使用して、送信前にノードの追加/編集フォームで行われた変更を確認します は近いようですが、コメントのように、実際には機能しません。

ルールモジュール を使用した他のAも読みましたが、それは完全に過剰です。

Answer 1

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

<?php

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

  $content_type = $form['#node']->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 = $("<div class='popup-box'><b>Are you sure you want to save your changes?</b><div class='btns-wrapper'><span class='save-btn'>Save</span><span class='cancel-btn'>Cancel</span></div></div>");

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

      $(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;
}

結果