Changing the font color on Alert.

[Looper23]

I have a popup that appears when i click on "Contact Us" menu on right

HTML 

<i class="fa fa-bars fa-lg"></i></a>
    <ul class="dropdown-menu" id="menuFa">
      <li><a ng-href="?id=my_requests&sys_id={{::user.sys_id}}">${My Requests}</a></li>
      <li ng-if="!data.isEnterprise"><a ng-href="?id=sc_wishlist">${Saved Items}</a></li>
      <li><a ng-href="discovery_intro.do" target="_blank">${Workstation Info}</a></li>
      <li><a ng-click="" href="?id=my_profile&sys_id={{::user.sys_id}}">${My Profile}</a></li>
      <li><a ng-click="" href="?id=global_alerts">${Global Alerts}</a></li>
     	 <li><a ng-click="onAlert()" href="#" >${Contact Us}</a></li> 
      <hr>

Client Script

function (spModal, $rootScope, $scope, snRecordWatcher, spUtil, $document, $element, $window, $location, $uibModal, cabrillo, $timeout) {	
	$scope.userID = $scope.user.sys_id;
	$scope.wishlistItemCount = 0;
	$scope.isSearchVisible = false;
	
	$scope.onAlert = function() {
   spModal.alert('(1) Make an Entry on the ticket of concern via the portal requesting a status update');
};

I need to change the color of alert from grey to black. I heard It might not be possible since its using the Bootstrap alert(). And that I would have to use $uibModal instead? I just need a simple pop up box with font color black. Doesn't matter what I use. Any help would be appreciated. 

[Anirban Roy]

Hi,

Please find the below:

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">
 <p style="color:red">Hello</p>
   </div>
 <div class="panel-footer text-right">
 <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
 </div>
 </div>
</script>

<div>
 <button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>
</div>
 
<script>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">Modal Window</h4>
   </div>
 <div class="panel-body wrapper-xl">
 <p style="color:red">Hello</p>
   </div>
 <div class="panel-footer text-right">
 <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
 </div>
 </div>
</script>

Client Script

function($uibModal, $scope) {
 var c = this;
 
 c.openModal = function() {
 c.modalInstance = $uibModal.open({
 templateUrl: 'modalTemplate',
 scope: $scope
 });
 }
 
 c.closeModal = function() {
 c.modalInstance.close();
 }
 
}

Please mark the answer helpful and correct, if it helped.

Regards,

Anirban

[Looper23]

Is this how I'll write the html? i have the lists item right now, but im not sure where can i put the script in the html. Also for the client script, do i have to make it as part of the global function? 

 <!-- Fa Fa-Bars -->
    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><li class="dropdown down right">
    <i class="fa fa-bars fa-lg"></i></a>
    <ul class="dropdown-menu" id="menuFa">
      <li><a ng-href="?id=my_requests&sys_id={{::user.sys_id}}">${My Requests}</a></li>
      <li ng-if="!data.isEnterprise"><a ng-href="?id=sc_wishlist">${Saved Items}</a></li>
      <li><a ng-href="discovery_intro.do" target="_blank">${Workstation Info}</a></li>
      <li><a ng-click="" href="?id=my_profile&sys_id={{::user.sys_id}}">${My Profile}</a></li>
      <li><a ng-click="" href="?id=global_alerts">${Global Alerts}</a></li>
     	 <li><a ng-click="c.openModal()" href="#" >${Contact Us}</a></li> 
    </ul>
    
   <script>
    <div class="panel panel-default">
 		<div class="panel-heading">
   <h4 class="panel-title">Modal Window</h4>
   </div>
   <div class="panel-body wrapper-xl">
  <p style="color:red">Hello</p>
   </div>
   <div class="panel-footer text-right">
   <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
   </div>
   </div>
    
    </script>

[Anirban Roy]

Hi @Looper23 ,

Yes, you can keep the script section in the HTML code. This is creating a layout for your custom modal. The placement of the script doesnt impact the actual UI defined in the HTML, it just creates an HTML template for your bootstrap modal(only called when you invoke openModal)

The function openModal is part of your client script.

 Hope this helps.

In case, the answer was helpful, please click helpful and mark it as correct answer.

Regards,

Anirban

[Namrata Khabale · Accepted solution]

Hey Looper,

Put your code in html and client script as below shown.

Refer the  screenshots.

Output:

Mark Correct and Helpful if you find my response worthy!!!

Best Regards,

Namrata.