Angular ui Open Modal Automatically on load page

Question

angular-ui-modal]1 for create my site and I want to show my modal automatically when the user enter in my webpage. With ng-click is easy , I have this code:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('HomeCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function(data) {
  var modalInstance = $modal.open({
    templateUrl: 'modals/register.html',
    resolve: {
      data: function() {
        return data === null ? {} : data;
      }
    }
  });
};
}]);

But I do not know how trigger the modal when load page. Any help? Please

Just call the same code outside of the scope function. Also $modal is an old version so you may want to consider upgrading. — Matthew Green
– Matthew Green, Commented Jan 16, 2017 at 16:10

Mistalis · Accepted Answer · 2017-01-16 16:21:43Z

1

You just have to call the function when the controller is loaded:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('HomeCtrl', ['$scope', '$modal', function($scope, $modal) {
  $scope.openModal = function(data) {
    $scope.blurred  = "blurredopen";
    var modalInstance = $modal.open({
      templateUrl: 'modals/register.html',
      resolve: {
        data: function() {
          return data === null ? {} : data;
        }
      }
    });
  };

  $scope.openModal(); // <-- Call it
}]);

Demo on JSFiddle

edited Jan 16, 2017 at 16:21

answered Jan 16, 2017 at 16:13

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mistalis Over a year ago

Added a JSFiddle demo. Be sure you call $scope.openModal() after declaring the function.

lordf Over a year ago

other question @Mistalis , if i want the modal appears after x seconds? Thanks for your help

svarog Over a year ago

use $timeout, if you've found Mistalis's answer helpful then please accept or at least upvote it.

lordf Over a year ago

Thanks @svarog, how i must use $timeout?

lordf Over a year ago

yes works fine with timeout but i have a hard problem, cant add a contoller to modal

Collectives™ on Stack Overflow

Angular ui Open Modal Automatically on load page

1 Answer 1

Demo on JSFiddle

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related