fun with ui-router part 1

<!doctype html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>My App</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">

  <link rel="stylesheet" href="style.css">

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>

  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>

  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <div class="container text-center">

    <div class="btn-wrap row" ng-init="model.text = 'Hello World!'">
      <p class="col-xs-12">
        <input type="text" class="form-control" ng-model="model.text">
      </p>
      <p class="col-xs-6">
        <a ui-sref="index({theater: 1})" class="btn btn-primary" ng-class="{active: $stateParams.theater}">顯示為對話框 1</a>
      </p>
      <p class="col-xs-6">
        <a ui-sref="index.theater()" class="btn btn-success" ng-class="{active: $state.includes('index.theater')}">顯示為對話框 2</a>
      </p>

    </div>

  </div>

  <div id="dialog-overlay" ng-show="$state.includes('index.theater') || $stateParams.theater" ng-click="$state.go('index', {theater: null})" ng-cloak>
    <div id="dialog" ng-click="$event.stopPropagation()">
      <p class="main"
         ng-class="{'no-1': $stateParams.theater, 'no-2': $state.includes('index.theater')}">{{ model.text }}</p>
      <p class="hint text-muted"><small>點擊框外任意處關閉</small></p>
    </div>
  </div>

</body>
</html>

angular.module('myApp', ['ui.router'])

.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('index', {
      url: '/?theater'
    })
      .state('index.theater', {
        url: 'theater'
      });

})

.run(function ($rootScope, $state) {
  $rootScope.$state = $state;
})

.controller('MainCtrl', function ($scope, $stateParams, $log) {

  $scope.model = {};

  $scope.$stateParams = $stateParams;

});

/** styles here **/

.btn-wrap {
  padding: 50px 0;
}

#dialog-overlay {
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;

  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.3);
}

#dialog {
  position: relative;

  top: 50%; left: 50%;

  margin-left: -250px;
  margin-top: -150px;

  width: 500px;
  height: 300px;

  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  box-shadow: 0 5px 25px 4px rgba(0, 0, 0, 0.6);

}

#dialog .main {
  font-size: 40px;
  text-align: center;

  color: #5f89ff;

  line-height: 300px;
}

#dialog .main.no-1 {
  color: rgb(50, 118, 177);
}
#dialog .main.no-2 {
  color: rgb(71, 164, 71);
}

#dialog .hint {
  text-align: right;
  margin-top: -33px;
  margin-right: 7px;
}