spmodal.confirm

[Venkat122]

Hi All,

I want to change default colors for OK and Cancel buttons for the popup dialog called using spModal.confirm method. How this can be changed?

Thanks

Venkat

[SatheeshKumar]

you can use the below as as an alternative!

Controller:

function($uibModal, $scope) {

var c = this;

c.openModal = function() {

c.modalInstance = $uibModal.open({

templateUrl: 'modalTemplate',

scope: $scope

});

}

c.closeModal = function() {

c.modalInstance.close();

}

}

HTML:

<div>

<button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>

</div>

<script type="text/ng-template" id="modalTemplate">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Modal Window</h4>

   </div>

<div class="panel-body wrapper-xl">

Hello

   </div>

<div class="panel-footer text-right">

<button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>

</div>

</div>

</script>

Notes:

• Make sure the $uibModal service and $scope is included in the controller.
• In this example the modal template is just included in the HTML, but you could also set the “templateURL” property to an ng-template associated with this widget.

[nataliya_b]

on high level: if your modal is angular ng-template, you could update this template by adding 

following on the top 

<style>
.btn-primary {color:red!important;}
</style>

//rest of template code goes here

[SatheeshKumar]

you can use the below as an alternative!

Controller:

function($uibModal, $scope) {

var c = this;

c.openModal = function() {

c.modalInstance = $uibModal.open({

templateUrl: 'modalTemplate',

scope: $scope

});

}

c.closeModal = function() {

c.modalInstance.close();

}

}

HTML:

<div>

<button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>

</div>

<script type="text/ng-template" id="modalTemplate">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">Modal Window</h4>

   </div>

<div class="panel-body wrapper-xl">

Hello

   </div>

<div class="panel-footer text-right">

<button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>

</div>

</div>

</script>

Notes:

• Make sure the $uibModal service and $scope is included in the controller.
• In this example the modal template is just included in the HTML, but you could also set the “templateURL” property to an ng-template associated with this widget.

[xiaix]

$scope.showConfirmMessage = function() {
	var msg = '<div>Hello, the span below should be stylized</div>';
	msg += '<span span="text-align:center;font-weight:bold;">My name is Fred</span>';
	
	spModal.confirm(msg).then(function(confirmed) {
		if (confirmed) {
			/*  yadda yadda */
		}
	});
	
	$timeout(function(){
		var span = document.getElementsByTagName('span');
		for (var i = 0; i < span.length; i++) {
			if (span[i].hasAttribute("span")) {
				span[i].style.cssText = span[i].getAttribute("span");
			}
		}
	},1000);
};

So the above code is how I got ours to work.

Something to take note of... you must assign the custom span attribute to span.  I tried others like css, customcss, spanx etc., but the only custom attribute tag that actually worked was span.  I have no clue why.

Either way, the above code was tested in New York instance and worked fine.

Now.. onto giving your OK and Cancel buttons the CSS you want...

Just use this code instead:

$scope.showConfirmMessage = function() {
	spModal.confirm("Are you sure?").then(function(confirmed) {
		if (confirmed) {
			/*  yadda yadda */
		}
	});
	
	$timeout(function(){
		var buttons = document.getElementsByTagName('button');
		for (var i = 0; i < buttons.length; i++) {
			if (buttons[i].parentNode.classList.contains("modal-footer")) {
				if (buttons[i].textContent == "OK") {
					buttons[i].classList.remove("btn");
					buttons[i].classList.remove("btn-default");
					buttons[i].classList.remove("btn-primary");
					buttons[i].style.cssText = "background-color:#000000;color:#ffffff";
				}
				if (buttons[i].textContent == "Cancel") {
					buttons[i].classList.remove("btn");
					buttons[i].classList.remove("btn-default");
					buttons[i].classList.remove("btn-primary");
					buttons[i].style.cssText = "background-color:#000000;color:#ffffff";
				}
			}
		}
	},1000);
};