<!DOCTYPE html>
<html data-ng-app="test">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body data-ng-controller="MyCtrl">
<div>
<button ng-click='showMe("http://rambler.ru/", "90%")'>Show</button>
</div>
<div data-ng-if="enabled">
<div style='background-color: #c0c0c0; position: absolute;'>
<button ng-click='removeDiv()'>Close</button>
<iframe src='{{link}}'></iframe>
</div>
</div>
</body>
</html>!(function(ng) {
'use strict';
MyCtrl.$inject = ['$scope'];
function MyCtrl($scope) {
$scope.enabled = false;
$scope.removeDiv = function(){
$scope.enabled = false;
}
$scope.showMe = function(param, param2){
$scope.link = param;
$scope.enabled = true;
}
}
ng.module('test', []).controller('MyCtrl', MyCtrl);
})(window.angular);
'use strict';
angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
});'use strict';
angular.module('myApp')
.controller('MainCtrl', function ($scope) {
$scope.enabled = false;
$scope.close = function(){
$scope.enabled = false;
};
$scope.showMe = function(param){
$scope.movie = {src: param, title:"My Title"};
$scope.enabled = true;
};
});<body data-ng-controller="MainCtrl">
<!--main -->
<div ng-view></div>
<div id="main">
<div data-ng-if="enabled">
<div style='background-color: #c0c0c0; position: absolute; width:90%; height:90%;'>
<button ng-click='close()'>Close</button>
<p>{{movie.title}}</p>
<iframe type="text/html" ng-src="{{movie.src}}"></iframe>
</div>
</div>
<div class="row">
<div class="container">
<h3>DZK Modal TEST</h3>
<button type="button" class="btn btn-danger" ng-click='showMe("/data")'>SHOW</button>
</div>
</div>
</div>
Средний
Средний
Простой