Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
Comments
Comment #1
damontgomery CreditAttribution: damontgomery commentedHere is the patch. It modifies the line below, adding the modal theme name as a class to the content div.
Comment #2
sebas5384 CreditAttribution: sebas5384 commentedHere 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.
Comment #3
sebas5384 CreditAttribution: sebas5384 commentedSome 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.
Comment #4
merlinofchaos CreditAttribution: merlinofchaos commentedThis 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.
Comment #5
merlinofchaos CreditAttribution: merlinofchaos commentedCan 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.
Comment #6
sebas5384 CreditAttribution: sebas5384 commentedHey! great! but... what do you mean "default" modals? there is a case when the "choice" variable isn't passed?
Comment #7
merlinofchaos CreditAttribution: merlinofchaos commentedWell, 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.
Comment #8
sebas5384 CreditAttribution: sebas5384 commentedok! 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!
Comment #9
sebas5384 CreditAttribution: sebas5384 commentedSomething that I notice, this patch works with stable and dev, so it should work with those versions.
Comment #10
noslokire CreditAttribution: noslokire commented#8 works for us, thanks
Comment #11
pfrenssenThe new parameter that is added to the function is not documented:
Comment #12
sebas5384 CreditAttribution: sebas5384 commented@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?
Comment #13
rodrigo panchiniak fernandes CreditAttribution: rodrigo panchiniak fernandes commented#8: ctools-add_css_class_to_modal_container-1532174-8.patch queued for re-testing.
Comment #14
pfrenssen@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).
Comment #15
noslokire CreditAttribution: noslokire commentedFor what its worth, patch still works in case this was lost in documentation purgatory.
Comment #16
Fabianx CreditAttribution: Fabianx commentedThis definitely needs work.
Choice can also be an array, which is a case, which is not handled by this patch.
Comment #17
Marko B CreditAttribution: Marko B commentedI 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.
Comment #18
ShaxA CreditAttribution: ShaxA at FFW commentedI 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.
Comment #19
ShaxA CreditAttribution: ShaxA commentedComment #20
Fabianx CreditAttribution: Fabianx as a volunteer commentedRTBC, looks great to me.
Comment #21
mgiffordComment #22
japerryAwesome, fixed.