<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/paper/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/extra.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
</head>
<body ng='BlogApp'>
<!-- NAVBAR -->
<header ng-controller="BlogController as blog">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand"><span class="glyphicon glyphicon-film"></span>Usery</a>
</div>
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<button class="btn btn-primary" ng-click="blog.modalWrite()">Write</button>
</a>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
// start our angular module and inject our dependecies
angular.module('BlogApp', ['ui.bootstrap'])
.controller('BlogController', function($routeParams, $scope, $modal, $log) {
var vm = this;
vm.createBlog = function() {
// some operation
};
vm.modalWrite = function (size) {
var modalInstance = $modal.open({
templateUrl: 'singleWrite.html',
controller: vm.createStory(),
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
vm.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
<div class="row">
<div class="col-xs-12">
<div class="form-wrap">
<h1>Write something</h1>
<form role="form" method="post" id="singleWrite.html" autocomplete="off">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control" placeholder="somebody@example.com">
</div>
<input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Log in">
</form>
<a href="/" class="forget" data-toggle="modal" data-target=".forget-modal">Cancel</a>
<hr>
</div>
</div>
</div>