Its loading opening modal and also loading template specified. But not showing anything.
Check out the demo here : http://demo.hupp.in/food-admin
Go to [Products] and Search EnegiKcal >= 3500. Then click on manage. It will open pop up but template content is not loaded.
Also one other thing I noticed is that it returns HTTP 304 for template sometimes.
This is how I open modal :
/** Open Modal For add edit tags */
$scope.open = function (productId) {
var modalInstance = $modal.open({
templateUrl: 'views/some.html',
controller: tagsModalInstanceCtrl,
size: 'lg'
});
modalInstance.result.then(function (msg) {
}, function () {
// $log.info('Modal dismissed at: ' + new Date());
});
};
var tagsModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close("hi");
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Here is template code :
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h3>Well, Hello there!</h3>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .
Answer: Use the Bootstrap . modal('show') method modal('show') method for launching the modal window automatically when page load without clicking anything. A common example of this technique is loading the modal when user landed on the home page and requesting them to subscribe the website newsletter.
You can implement it by using any other library for example Bulma , by using another framework that uses jquery, for example jqueryui, by using any other javascript library that could implement a modal, or by implementing it using javascript, or even with only css and html.
Ok, it is pretty strange but it seems that your template is based on the master branch of https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
and your sources on the tag 0.11.
https://github.com/angular-ui/bootstrap/blob/0.11.0/src/modal/modal.js
It is visible when you type $('.modal-content') in the console, you will see that it needs a modal-transclude directive, but in the sources there is no trace of this directive. Because, on 0.11 it directly uses the ng-transclude directive which is part of angular.
So, your code is correct, but the lib is not, try retrieving a correct version of it (maybe the last build of their repo is broken)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With