JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<!-- アプリケーションコンテナ -->
<div class="container" ng-app="app" ng-controller="AppCtrl" ng-app>

    <!-- ヘッダー -->
    <div class="page-header">
        <h3>
            Fullscreen Overlay Menu
            <small>hugeinc風味</small>
        </h3>
    </div>

    <!-- オーバーレイ表示ボタン -->
    <p style="text-align:center;">
        <button class="btn btn-primary" type="button" ng-click="openFullscreenOverlay();">Open Overlay</button>
    </p>

    <!-- オーバーレイ・レイヤー -->
    <div class="fullscreenOverlay fadeIn fadeOut" ng-show="isFullscreenOverlayActive">

        <!-- アクションバー領域 -->
        <div class="container actionbar">
            <div class="row">
                    
                <!-- オーバーレイ非表示ボタン -->
                <div class="col-xs-2 col-xs-offset-10" style="height:100%; text-align:right;">
                    <button class="btnClose" type="button" ng-click="closeFullscreenOverlay();"></button>                
                </div>
            
            </div>
        </div>
        <!-- アクションバー領域終了 -->

        <!-- メイン領域 -->
        <div class="main">
        
            <!-- メニュー -->
            <nav>
                <ul>
                    <li ng-repeat="item in items">
                        <a href="#" ng-click="closeFullscreenOverlay()">{{item}}</a>
                    </li>
                </ul>
            </nav>

        </div>
        <!-- メイン領域終了 -->
        
    </div>
    <!-- オーバーレイ・レイヤ終了 -->

</div>
<!-- アプリケーションコンテナ終了 -->

CSS

/* フルスクリーンオーバーレイ */
.fullscreenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: hidden;
}

/* アクションバー */
.fullscreenOverlay .actionbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 16px;
    /* add */
    /* background-color: #2270B2; */
    background: rgba(255, 255, 255, 0.9);
}
.fullscreenOverlay .actionbar .row {
    height: 100%;
}

/* フルスクリーンオーバーレイ非表示ボタン */
.fullscreenOverlay .btnClose {
    background: url(http://tympanus.net/Development/FullscreenOverlayStyles//img/cross.png) no-repeat center center;
    width: 80px;
    height: 100%;
    border: none;
    outline: none;
}

/* メイン領域 */
.fullscreenOverlay .main {
    height: 100%;
    padding-top: 80px;
    padding-bottom: 16px;
}

/* メニュー */
.fullscreenOverlay nav {
    position: relative;
    height: 100%;
    color: #212121;
    text-align: left;
    font-size: 16px;
    overflow: auto;
}
.fullscreenOverlay ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    display: inline-block;
    /* add */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}
.fullscreenOverlay ul li {
    display: block;
    /*height: 80px;*/
    /* add */
    height: 50px;
    padding-left: 20px;
}
.fullscreenOverlay ul li a {
    display: block;
    font-weight: 300;
    color: #212121;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}
.fullscreenOverlay ul li a:hover, .overlay ul li a:focus {
    color: #2270B2;
}

/* フェードイン開始 */
.fadeIn.ng-hide-remove {
    display: block !important;
    opacity: 0.0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

/* フェードイン終了 */
.fadeIn.ng-hide-remove.ng-hide-remove-active {
    opacity: 1.0;
}

/* フェードアウト開始 */
.fadeOut.ng-hide-add {
    display: block !important;
    opacity: 1.0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

/* フェードアウト終了...

JavaScript

/**
 * AngularJSアプリケーションコントローラー
 */
var app = angular.module('app', ['ngAnimate']);
function AppCtrl($scope) {
    
    //フルスクリーンオーバーレイはアクティブか？
    $scope.isFullscreenOverlayActive = false;

    //フルスクリーンオーバーレイ表示
    $scope.openFullscreenOverlay = function() {
        $scope.isFullscreenOverlayActive = true;
    }

    //フルスクリーンオーバーレイ非表示
    $scope.closeFullscreenOverlay = function() {
        $scope.isFullscreenOverlayActive = false;
    }

    //メニュー項目
    //$scope.items = ['Home', 'About', 'Work', 'Clients', 'Contact'];
    $scope.items = ['Language', 'Terms and Conditons', 'Vehicle Data Privacy Policy', 'Privacy Policy', 'Contact Us'];

} //END AppCtrl()