With several modals, we have the need for different styling of each. Currently, the CTools Modal does not add any CSS classes to the modal container.

We have added this to modal.js and it works for us. A patch will be provided in the next comment.

Please let me know if there is a better method or any directions to take this. I will admit that I am not too familiar with the CTools modal system.

CommentFileSizeAuthor
#18 ctools-add_css_class_to_modal_container-1532174-18.patch2.06 KBShaxA
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View
#8 ctools-add_css_class_to_modal_container-1532174-8.patch1.9 KBsebas5384
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View
#2 ctools-add_css_class_to_modal_container-1532174-2.patch1.68 KBsebas5384
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View
#1 ctools-add-css-class-to-modal-container-1532174-1.patch784 bytespandaeskimo
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View
Members fund testing for the Drupal project. Drupal Association Learn more

Comments

pandaeskimo’s picture

FileSize
784 bytes
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View

Here is the patch. It modifies the line below, adding the modal theme name as a class to the content div.

// Create our divs
    $('body').append('<div id="modalBackdrop" style="z-index: 1000; display: none;"></div><div id="modalContent" class="' + Drupal.CTools.Modal.currentSettings.modalTheme +'" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');
sebas5384’s picture

FileSize
1.68 KB
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View

Here is a another approach to add a class that make sense when you need a different style for each modal, using the choice string like "review-create-form-modal-style" to identify the modal from settings.

I add that class to the backDrop too.

Cheers,
Sebas.

sebas5384’s picture

Some review about this issue?

This is really handy when i have more than one type of modal, just want a class to apply a differente style.

merlinofchaos’s picture

Status: Active » Needs review

This status might help. THough the CTools needs review queue is fairly long. I am limited on time and not a lot of people are around to help, alas.

merlinofchaos’s picture

Can you verify, does this work right for the default modal? If so, it seems fine to me and can probably be RTBC'd.

I ask, because I can't remember what 'choice' will be set to for the default.

sebas5384’s picture

Hey! great! but... what do you mean "default" modals? there is a case when the "choice" variable isn't passed?

merlinofchaos’s picture

Well, the default modal is any of CTools' basic uses of the modal. I can't remember if choice is built up or left undefined in that case.

sebas5384’s picture

FileSize
1.9 KB
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View

ok! now I get it! if you don't declare a custom preset the choice will be undefined.

So, here is a new patch with default classes and prefixes for modal and backdrop, if I'm missing something, please let me know!

sebas5384’s picture

Something that I notice, this patch works with stable and dev, so it should work with those versions.

noslokire’s picture

#8 works for us, thanks

pfrenssen’s picture

Title: Add class to modal » Add class containing the "modal style" to modal
Status: Needs review » Needs work

The new parameter that is added to the function is not documented:

@@ -334,7 +338,7 @@
    * @param animation (fadeIn, slideDown, show)
    * @param speed (valid animation speeds slow, medium, fast or # in ms)
    */
-  Drupal.CTools.Modal.modalContent = function(content, css, animation, speed) {
+  Drupal.CTools.Modal.modalContent = function(content, css, animation, speed, choice) {
     // If our animation isn't set, make it just show/pop
     if (!animation) {
       animation = 'show';
sebas5384’s picture

@pfrenssen Doesn't have to be actually documented this new parameter, because the choice is already passed by the name of the new modal preset.
Otherwise the choice is null and the new class is going to be modal-default and backdrop-default.

Would it be nice to have some explaining about this new css classes in the documentation where the preset api is, but, where is that?

rodrigo panchiniak fernandes’s picture

Status: Needs work » Needs review
pfrenssen’s picture

Status: Needs review » Needs work

@sebas5384, Drupal.CTools.Modal.modalContent() accepts 5 parameters, and only 4 are documented. Whether or not this parameter is documented elsewhere on the page is irrelevant. These docblocks are also used out of the script context (eg. by IDEs and in online documentation).

noslokire’s picture

For what its worth, patch still works in case this was lost in documentation purgatory.

Fabianx’s picture

This definitely needs work.

Choice can also be an array, which is a case, which is not handled by this patch.

Marko B’s picture

Issue summary: View changes

I would definitely like this option by default. But I made use of whole framework and when using modal forms I passed to each modal window that is custom a CLASS variable an then themed the modal. Here is more details http://drupaldump.com/theming-whole-modal-form-custom-class
the same an be achieved with plain modal from ctools.

ShaxA’s picture

FileSize
2.06 KB
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es). View

I had to make the same thing today. So I got to this page. I see what you are trying to do, but I don't think the best way is through choice. As it was mentioned, the choice can be array. And maybe is a bit messy to use it. So I've added actually a setting for modal which is modalClass and then append it to #modalBackdrop and #modalContent. Hope it will help someone.

ShaxA’s picture

Status: Needs work » Needs review
Fabianx’s picture

Status: Needs review » Reviewed & tested by the community

RTBC, looks great to me.

mgifford’s picture

japerry’s picture

Status: Reviewed & tested by the community » Fixed

Awesome, fixed.

  • japerry committed afdcd01 on 7.x-1.x authored by ShaxA
    Issue #1532174 by sebas5384, ShaxA, pandaeskimo: Add class containing...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.