How to add a modal which then opens a ctools modal? 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?
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));