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.

3
  • 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, 2017 at 12:55
  • Client request, exactly :) Jan 23, 2017 at 12:56
  • Thanks. I'll keep an eye out on the other Q where you placed a bounty. Jan 23, 2017 at 13:01

1 Answer 1

5

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

2
  • 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?
    – prout
    Mar 17, 2018 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, 2018 at 9:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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