Angular+JQ+Bootstrap
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
<button class="btn" ng-click="isShown = !isShown">show dialog</button>
<div modal-dialog="modal.html" shown="isShown"></div>
</div>
<script type="text/ng-template" id="modal.html">
<div>
<div class="modal-header">
<h1>I'm here!</h1>
</div>
<div class="modal-body">
<iframe class="icon video" src="http://media.kcrg.com/designvideo/bimVidPlayer.swf?i=172561851" height="200px" width="400px" frameborder="50px" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
</iframe>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="isShown = false">Close</button>
</div>
</div>
</script>
</script>
JavaScript
var app=angular.module('myApp', []);
app.directive('modalDialog', function($http, $templateCache, $compile) {
return function(scope, elm, attrs) {
var $body = $('body');
var $elm = $(elm).addClass('modal hide');
var modalHtml;
//Fetch element html from template and set it if it hasn't been done yet,
//else continue
function getModalHtml(done) {
if (!modalHtml) {
$http.get(attrs.modalDialog, {
cache: $templateCache
}).success(function(html) {
done(modalHtml = html);
});
} else {
done(modalHtml);
}
};
scope.$watch(attrs.shown, function(value) {
if (value) {
getModalHtml(function(html) {
$elm.html(html).show();
$compile($elm.contents())(scope);
});
} else {
$elm.html('').hide();
}
});
}
});
function MyCtrl($scope) {
$scope.word = 'what';
$scope.killcount = 42;
};