ui.bootstrap Alert组件关闭按钮不显示问题排查

I’ve run into this exact headache before when building ASP.NET apps in DNN—DNN’s built-in resources and skin/container styles love to clash with UI Bootstrap components. Let’s break down the most likely fixes tailored to the DNN environment:

1. Fix Version Conflicts Between DNN’s Bootstrap and UI Bootstrap #

DNN often ships with its own Bootstrap version (usually in the skin or core) that might not match what your UI Bootstrap component expects. For context:

• UI Bootstrap 0.14.x to 2.x requires Bootstrap 3.x CSS
• UI Bootstrap 2.x+ (for AngularJS 1.6+) works with Bootstrap 4.x

Use your browser’s dev tools (F12 → Network tab) to check if two versions of Bootstrap CSS are loading. If so:

• Either adjust your UI Bootstrap version to align with DNN’s Bootstrap
• Or disable DNN’s built-in Bootstrap load (go to Page Settings → Advanced Settings → Resource Management, and uncheck the Bootstrap resource if available)

2. Check for DNN Skin/Container Style Overrides #

DNN skins often have custom CSS that can hide the alert’s close button. Right-click the alert area → Inspect to check the close button element for styles like:

.close {
  display: none !important;
  visibility: hidden !important;
}

If you find this, add a more specific CSS selector to override the skin’s style, e.g.:

.uib-alert .close {
  display: block !important;
  visibility: visible !important;
}

3. Verify Your UI Bootstrap Alert Markup is Correct #

Make sure you’re using the proper structure for closeable alerts, including the closeable attribute and matching AngularJS logic:

Correct Markup: #

<div uib-alert 
     ng-repeat="alert in alerts" 
     type="{{alert.type}}" 
     closeable
     ng-click="closeAlert($index)">
  {{alert.msg}}
</div>

Corresponding AngularJS Controller Code: #

angular.module('myApp', ['ui.bootstrap'])
  .controller('AlertCtrl', function($scope) {
    $scope.alerts = [
      { type: 'warning', msg: 'This is a test alert with a close button.' }
    ];

    $scope.closeAlert = function(index) {
      $scope.alerts.splice(index, 1);
    };
  });

If you tried manual button code before, ensure you’re using the close class and proper aria attributes (UI Bootstrap relies on these for styling):

<button type="button" class="close" ng-click="closeAlert($index)" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

4. Ensure Proper Resource Loading Order #

DNN’s resource management might load scripts/CSS out of order. Make sure your resources load in this sequence:

1. Bootstrap CSS
2. AngularJS library
3. UI Bootstrap script
4. Your custom app script/controller

You can adjust this in DNN’s Page Settings → Resource Management, or by adding your resources in the correct order within your module’s markup.

5. Disable DNN’s Resource Compression Temporarily #

Sometimes DNN’s resource compression/minification can corrupt CSS or scripts, causing the close button styles to fail. Disable compression in Host Settings → Performance to test if this fixes the issue. If it does, you might need to exclude your Bootstrap/UI Bootstrap resources from compression.

内容的提问来源于stack exchange，提问作者Mickers