it-swarm.com.de

Wie kann ein Bestätigungsfeld angezeigt werden, bevor ein Formular gesendet wird?

Auf der node/%/edit Wenn der Benutzer auf die Schaltfläche Senden klickt, möchte ich ein einfaches Popup-Feld mit dem Text "Möchten Sie Ihre Änderungen wirklich speichern?" anzeigen. Wenn der Benutzer auf Cancel (oder No) klickt, passiert nichts. Wenn der Benutzer auf Ok (oder Yes) klickt, wird das Formular gesendet.

Ich habe die A's bereits in den folgenden verwandten Q's ausprobiert:

Ich habe auch einige andere A's gelesen, die das Rules-Modul verwendet haben, aber das ist total übertrieben.

1
Wim Mostrey

verify_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

verify_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/verify-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/verify_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;
}

Ergebnis

(enter image description here

4
No Sssweat