how to create pop up screen

Question

I am using JQM from last one year. I have developed a pop up screen In jqm Fiddle. Can we develop this type of pop up screen in angular js? It means open a pop up screen when button is click. With edit field and button in that?

$(function(){
  $('#openPopup').click(function(){
      $( "#testCaseId" ).popup( "open" );
  })
})

There are a million directives out there doing this, and it's been answered in many posts/questions. Check out angular-ui bootstrap for starters. — Mohammad Sepahvand, Jul 27 '14 at 05:12
Here is question can help you http://stackoverflow.com/questions/15812203/angularjs-show-popups-the-most-elegant-way — Gopal Joshi, Jul 27 '14 at 05:16

harishr · Accepted Answer · 2014-07-27T06:29:45.303

1

angular-ui-bootstrap is port of bootstrap re-written in angular...

you can checkout this plunker on how to create modal popup

to learn how to create other bootstrap components in angularjs checkout ui-bootstrap

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

edited Jul 27 '14 at 06:29

answered Jul 27 '14 at 05:57

harishr

17,807
9
78
125

Harish can you use fiddle or jsbin for example – Pallavi Sharma Jul 27 '14 at 06:02
i have provided plunker links in the answer – harishr Jul 27 '14 at 06:04
plunker is showing error can you please provide fiddle – Pallavi Sharma Jul 27 '14 at 06:26
Hello Plunker! is written in that.. – Pallavi Sharma Jul 27 '14 at 06:27
check out [new plunker](http://plnkr.co/edit/xcZc4UcU6eikCct5IpzA?p=preview) – harishr Jul 27 '14 at 06:29
after loading it show ..error in plunker.. – Pallavi Sharma Jul 27 '14 at 06:30
http://plnkr.co/edit/xcZc4UcU6eikCct5IpzA?p=preview - its working for me – harishr Jul 27 '14 at 06:31
I need to to login ? actually never use plunker.used only fiddle and jsbin – Pallavi Sharma Jul 27 '14 at 06:33
plnkr.co/edit/xcZc4UcU6eikCct5IpzA?p=preview link is working for me .. – Pallavi Sharma Jul 27 '14 at 06:35
finally.. its working.. you can just copy paste the code from here to jsbin or whereever you want... i have put in effort to do something and its your turn... be ready to learn please... – harishr Jul 27 '14 at 06:39
thanks ..mean I need to lear bootstrap before angular.js ? – user944513 Jul 27 '14 at 06:40
angularjs is javascript framework... bootstrap in for display purpose... just go thru egghead.io videos, you will learn both – harishr Jul 27 '14 at 06:43
@user3665790 so you have downvoted everyone who tried to help you, great man... really great... – harishr Jul 27 '14 at 19:33
I didnot do down voted.. – Pallavi Sharma Jul 27 '14 at 21:41

score -1 · Answer 2 · answered Jul 27 '14 at 06:20

Its fairly straight-forward to leverage bootstrap to create your modal popup:

Modal Directive

app.directive('modal', function () {
    return {
        restrict: 'A',
        scope: true,
        transclude: true,
        templateUrl: 'modalTemplate.html',
        link: function (scope, element, attr) {
            scope.id = attr.id;
            scope.title = attr.title;
            element.removeAttr('id');
        }
    }
})

HTML

<body ng-app="app" ng-controller="ctrl">
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <div title="This is the modal title" id="myModal" modal>
        This is the modal content
    </div>
</body>

Demo Plunker

pluker is showing error can you use fiddle.. – Pallavi Sharma Jul 27 '14 at 06:26 — Pallavi Sharma, Jul 27 '14 at 06:26
Hello Plunker! is written in that – Pallavi Sharma Jul 27 '14 at 06:27 — Pallavi Sharma, Jul 27 '14 at 06:27
after loading it show ..error in pluker.. – Pallavi Sharma Jul 27 '14 at 06:29 — Pallavi Sharma, Jul 27 '14 at 06:29

how to create pop up screen

2 Answers2