Modification couleur Overlay d'une Modale

[Synfactory]

Bonjour à tous,
je souhaitais savoir s'il y avait la possibilité de modifier la couleur et la tranparence de l'overlay d'une modale?

Merci

[Raphwit]

Bonjour, il est possible avec quelques notions de CSS de modifier la couleur et la transparence de l'overlay d'une modale.

Pour cela il faut rajouter une inclusion de type CSS et rajouter le code suivant :

  .actor-modal.ember-modal-overlay._scene1_modal1 {
    background-color: rgba(0, 136, 255, 0.678) !important;
  }

Il est à noter qu'il faut changer le 'scene1' par la clé de la scène au sein de laquelle la modale est affichée.
Il faut également changer 'modal1' par la clé de l'acteur modale.

Le code RGBA est ainsi modifiable pour lui donner la couleur et la transparence souhaitée.

[Synfactory]

Merci :)
J'ai rajouté un acteur html sur ma page principale :

<style> .actor-modal.ember-modal-overlay._production_modal1 { background-color: rgba(0, 0, 0, 1) !important; } </style>

ça ne le prends pas en compte ou alors où dois je faire l'inclusion?

[Raphwit]

La méthode avec l'acteur HTML fonctionne aussi également, il faut bien vérifier que les clés soient les mêmes, j'ai testé de mon côté aucune soucis !

[Synfactory]

les clés sont bonnes .

Est ce normal que le premier underscore avant production soit blanc?

[Raphwit]

Oui, voici une scène d'exemple qui fonctionne :

SYNAPPS-STUDIO-SCENE|{"config":{"key":"scene1","name":"Scène 1"},"leadActor":{"type":"layout/stack","key":"stack1","children":[{"type":"layout/modal","key":"modal1","properties":{"height":"200px","width":"200px","isShown":true}},{"type":"display/html","key":"html1","properties":{"content":"<style>\n  .actor-modal.ember-modal-overlay._scene1_modal1 {\n    background-color: {{color}} !important;\n  }\n</style>"},"additionalDefs":{"color":{"type":"color"}},"additionals":{"color":"rgba(249, 147, 147, 1)"}}],"properties":{"backgroundColor":"rgba(6, 6, 6, 1)","classNames":"blue_modal"}}}

Il est possible de changer la couleur de l'overlay avec l'additionnelle de l'acteur 'html1'

[Synfactory]

Merci beaucoup :). J'avais visiblement pas mis l'acteur html à la bonne place ...

[Synfactory]

erratum,
cela fonctionne directement dans la scene. Si par exemple ma scene principale appelle la scene avec la modale, celle ci ne prend pas la couleur.
Scène appelée = ok

Scene de démarrage qui appelle la scene avec la modale :

[Raphwit]

Effectivement, ce cas est plus particulier, si vous souhaitez afficher cette modale dans d'autres scènes, il vous faudra remplacer dans l'acteur html le code par le suivant :

<style>
  .actor-modal.ember-modal-overlay[class*="_scene1_modal1"] {
    background-color: {{color}} !important;
  }
</style>

Toujours avec le même principe de renseigner les bonnes clés et voilà ! ;)

[Synfactory]

It Works! Merci c'est parfait