How to stylize the colors of buttons in spModal in ServicePortal?

[Augustohenri01]

my code in ServicePortal:

OK button

spModal.open({

widget: widget,

buttons: [

{label:'OK', cancel: true, style},

],

backdrop: 'static',

keyboard : false

})

[-O- · Accepted solution]

The spModal directive contains this code to create buttons:

<div class="modal-footer" ng-style="options.footerStyle">
	<button
			class="btn btn-default {{button.class}}"
			ng-class="{ 'btn-primary': button.primary }"
			ng-click="buttonClicked(button)"
			ng-disabled="button.primary &amp;&amp; options.input &amp;&amp; form.xpForm.$invalid"
			ng-repeat="button in options.buttons track by button.label"
			sp-focus-if="button.focus"
			>{{button.label}}</button>
</div>

So you should be able to (simpler variant) add CSS (include) to your portal or widget and style your button using selector:

div.modal-footer button.btn {
	/* ... */
}

or you should be able to (more elaborate variant) - on one hand - add special class name(s) to the options structure-button definition(s):

spModal.open({
	'backdrop': 'static',
	'buttons': [
		{
			'cancel': true,
			'label': 'OK',
			'class': 'u_special-class-name',
		},
	],
	'keyboard': false,
	'widget': widget,
})

and - on the other hand - add CSS (include) to your portal or widget and style your button using selector:

div.modal-footer button.btn.u_special-class-name {
	/* ... */
}

[Augustohenri01]

Thanks for your reply, what worked was to follow this example:

https://serviceportal.io/modal-windows-service-portal/