0

I am trying to set up a modal that opens a ctools modal from inside it. IOW the user sees the first modal, clicks on a button inside that modal and it opens a second modal on top of the first modal. Then when the second modal's work is done, it closes and user can still see the first modal.

I understand that ctools is limited to one modal at a time according to this DO issue. My second modal is a ctools modal. I tried to set up a jQuery modal and a bootstrap modal as the first modal, but closing the second ctools modal always closes my first modal.

Any pointers as to where I can find a workable solution to this?

1

Any pointers as to where I can find a workable solution to this?

If you know jQuery and CSS you can create your own custom modal. Modal one has div id of modal-1 and for two modal-2.

use the z-index css property, and make sure modal 2 is higher than 1, so it displays on top:

#modal-2 { z-index: 10; }
#modal-1 { z-index: 5; }

Use CSS to center the div, so it appears in the middle of the page, like this. Probably better to use fixed position rather than absolute, up to you.

Then with jQuery use the .click() function

(function ($) {

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

      $( "#some-show-button" ).click(function() {
        $('#modal-1').fadeIn();
      });

      $( "#some-x-button", "#some-submit-button").click(function() {
        $('#modal-1').fadeOut();
      });

      $("#some-other-show-button").click(function() {
        $('#modal-2').fadeIn();
      });

      $( "#some-other-x-button", "#some-other-submit-button").click(function() {
        $('#modal-2').fadeOut();
      });

    }
  };
}(jQuery));
  • Thanks so much for the detailed answer! Unfortunately I don't have a choice with the second modal - it has to be a ctools modal (I am using the Scald module and their in-line atom handling is done with ctools). How can I change my second modal (the ctools modal) properties to give it the z-index? – longboardnode Dec 29 '16 at 16:46
  • @longboardnode the z-index is just CSS. So all you have to do is find the id or class that wraps the c-tools modal (by inspecting element with your browser) and give it a higher z-index, than your other modal and add it to your theme's style.css file. – No Sssweat Dec 30 '16 at 0:48
  • 1
    Thanks, that helped! I didn't really have to change the ctools modal z-index, just give my jQuery modal a z-index that is low enough to be below ctools yet display over my content - in my case the first modal worked with z-index:10; – longboardnode Dec 30 '16 at 4:33

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.