1

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:

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

  • 1
    Client request? I would find this a bit annoying to see the popup every single time, even when all fields are filled in. – No Sssweat Jan 23 '17 at 12:55
  • Client request, exactly :) – Wim Mostrey Jan 23 '17 at 12:56
  • Thanks. I'll keep an eye out on the other Q where you placed a bounty. – Wim Mostrey Jan 23 '17 at 13:01
3

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

Result

enter image description here

  • hi, I'm quite weak at ajax and stuff, how do you operate when you only want it on some node types and wanna display some node value in there? – gl_prout Mar 17 '18 at 8:52
  • 1
    @gl_prout I edited confirm_popup.module to show you how. If you want to grab a node value, you will need to edit the confirm-popup.js file and grab it with with JS. It depends, if it's a text box, you can with var some_value = $('#field_id').val(); and then you will need to concatenate it inside the text. Ex: ...<b>Are you sure you want to save your changes?' " + some_value + " '</b>... – No Sssweat Mar 17 '18 at 9:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.