Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

fo-modal

A nice modal

Demo

Install

bower install fo-modal --save

Require

Tether

Usage

<link rel="stylesheet" href="bower_components/fo-modal/dist/css/fo-modal.css" />

<script src="bower_components/tether/dist/js/tether.js"></script>
<script src="bower_components/fo-modal/dist/js/fo-modal.js"></script>
var app = angular.module('app', ['foModal']);

app.controller('MainCtrl', function ($scope, foModal) {

  $scope.open = function() {
    foModal.open({
      templateUrl: 'modal.html'
    });
  };

});
<button class="btn-demo" ng-click="open()">DEMO</button>

<script id="modal.html" type="text/ng-template">
  <h2>Feature</h2>
  <ul class="list-unstyled list-feature">
    <li>Nice UI and easy customize</li>
    <li>Position middle in screen or anyWhere</li>
    <li>Api is Simple</li>
    <li>No jQuery is required</li>
    <li>{{vm.str}}</li>
  </ul>

  <button class="btn btn-default" ng-click="close()">取消</button>
  <button class="btn btn-info" ng-click="yes()">确认</button>
</script>

API

Api of fo-mdal is simple but powerful.

.open(options)

Method to create and open a modal.

options:

  • templateUrl
  • controller
  • bodyId
  • bodyClass
  • overlayId
  • overlayClass
  • animation
  • overlay
  • showClose
  • closeByOverlay
  • scope
  • resolve
templateUrl {String}
<script type="text/ng-template" id="templateId">
    <h1>eading</h1>
    <div>Content</div>
</script>
foModal.open({ templateUrl: 'templateId' });
controller {String} | {Array} | {Object}
foModal.open({
    template: 'template.html',
    controller: 'mainController'
});

or

foModal.open({
    template: 'template.html',
    controller: ['$scope', 'otherService', function($scope, otherService) {
      // todo
    }]
});
You can’t perform that action at this time.