Angularjs Bootstrap.ui Modal Not Showing
Solution 1:
This is a incompatibility with ui.bootstrap and bootstrap 3.0.
You only need to put in your css:
.modal {
display: block;
}
You can see this post for more detail: AngularJs with UI-Bootstrap: Fix broken dialog boxes.
Solution 2:
I had the exact same issue. What I did to fix it was to change what i had in my template.html, the .html provided with the templateUrl
property in the open-function.
I had the full modal-markup there:
<divclass="modal fade"tabindex="-1"role="dialog"><divclass="modal-dialog"><divclass="modal-content">And here some modal markup</div></div></div>
When I removed the first three divs and only had And here some modal markup
left in the template.html it worked fine!
Solution 3:
Have exactly the same symptoms while ago. Do not remember the exact details, but I think the main problem was that the instance of the modal has always display:none
.
- Make sure that you are using the
ui-bootstrap
with templates (ui-bootstrap-tpls.js
) -- as there is the effect of graying-out you probably do. - In
ui-bootstrap-tpls.js
go to themodal
template at the very bottom (you can find it by: "template/modal/window.html") and add therestyle="display:block". If it will not help try to match css classes of the template against your
bootstrap.css`.
I personally used some custom version of bootstrap3
, and now have got these as template:
angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/modal/backdrop.html",
"<div class=\"modal-backdrop fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>");
}]);
angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/modal/window.html",
"<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" style='display:block;z-index:1050' ng-transclude></div>");
}]);
EDIT You can easily remove from your bootstrap.css
all styles in class modal
(and its sub-classes) where display
is set to none
-- bootstrap
just hides the DOM element, whereas ui-bootstrap
removes it completely.
Solution 4:
The problem for me (developing with visual studio using bootstrap 4) was that the bootstrap class .fade:not(.show)
defines opacity: 0
. Using code inspector to disable this class, I could see that the modal would show.
However, in order to avoid modifying vendor files (namely, the bootstrap.css
file), I simply extended the function that calls the modal to add the 'show' class to the modal page. In your example, this would be as follows:
$scope.showPrivacy = function() {
$modal.open({
templateUrl: '/Privacy',
windowClass: 'show',
controller: 'PrivacyInstanceController'
});
returnfalse;
};
Normally, adding the show class to the entire window would mean that the modal is displayed continuously. This is not an issue when pages are loaded dynamically because the entire element with the .show
class is removed when the user clicks away from the modal, irrespective of the existence of this class.
Solution 5:
For some weird reason the modal's backdrop height isn't set to fill the window, to fix this in ui-bootstrap-tpls.js
i went to the template/modal/backdrop.html
line at the bottom and added the following to the style options 'width':'100%', 'height':'100%'
Post a Comment for "Angularjs Bootstrap.ui Modal Not Showing"