JSFiddle - React, Tailwind, and code Playground

by jlamont

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng:app="app">
    <div>
        <ul><li><a href='#' data-toggle="modal" data-target="#loginModal">Login</a></li></ul>
        
        <div id='loginModal' class='modal fade' myModal ng-controller="LoginDialogController" tabindex="-2" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">        
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">x</button>
                      <h3>Login MyApp</h3>
                    </div>
                    <div class="modal-body">
                      <form name="login_form">
                          <alert ng-repeat="alert in alerts" type="danger" close="closeAlert($index)">{{alert.msg}}</alert>
                        <p><input type="text" class="span3" ng-model="login.user_email"  placeholder="Email" required></p>
                        <p><input type="password" class="span3" ng-model='login.password' placeholder="Password" required></p>
                        <p><button type="submit" class="btn btn-primary" ng-click="ok()">Sign in</button>
                          <a href="#">Forgot Password?</a>
                        </p>
                      </form>
                    </div>
                    <div class="modal-footer">
                      New To ReqManager.com?
                      <a href="#" class="btn btn-primary">Register</a>
                    </div>
                </div>
            </div>
        </div>         
    </div>
</div>

JavaScript

angular.module("app", []).directive('myModal', function() {
    return {
     restrict: 'A',
     scope:{},
     link: function(scope, element, attr) {
       scope.dismiss = function() {
           element.modal('hide');
       };
     }
   } 
});

function LoginDialogController($scope){
    $scope.ok = function(){
        $scope.dismiss();
    };
}