AngularJS Example:

by manikantag

HTML

<div ng-app="angularBootstrap.modal">
    <button class="btn" bootstrap-modal-open="aboutModal">Open (default)</button>
    <button class="btn" bootstrap-modal-open="aboutModal" backdrop="false">Open (no backdrop)</button>
    <button class="btn" bootstrap-modal-open="aboutModal" escape-exit="false">Open (no escape key)</button>

    <bootstrap-modal modal-id="aboutModal">
        <div class="modal-header">
            <button class="close">x</button>
            <h3>About</h3>
        </div>
        <div class="modal-body">
            <h3>This thing!</h3>
            <ul>
                <li>Is awesome</li>
            </ul>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-primary close">Close</a>
        </div>
    </bootstrap-modal>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc7.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

angular.module('angularBootstrap.modal', []).
directive('bootstrapModal', function($defer) {
    var link = function(scope, elm, attrs) {
        var escapeEvent;
        var openModal;
        var closeModal;

        //Escape event has to be declared so that when modal closes,
        //we only unbind modal escape and not everything
        escapeEvent = function(e) {
            if (e.which == 27)
                closeModal();
        };

        openModal = function(event, hasBackdrop, hasEscapeExit) {
            var modal = jQuery('#'+attrs.modalId);

            //Make click on backdrop close modal
            if (hasBackdrop === true) {
                //If no backdrop el, have to add it
                if (!document.getElementById('modal-backdrop')) {
                    jQuery('body').append(
                        '<div id="modal-backdrop" class="modal-backdrop"></div>'
                    );
                }
                jQuery('#modal-backdrop').
                    css({ display: 'block' }).
                    bind('click', closeModal);
            }

            //Make escape close modal
            if (hasEscapeExit === true)
                jQuery('body').bind('keyup', escapeEvent);
            
            //Add modal-open class to body
            jQuery('body').addClass('modal-open');

            //Find all the children with class close, 
            //and make them trigger close the modal on click
            jQuery('.close', modal).bind('click', closeModal);

            modal.css({ display: 'block' });
        };
        
        closeModal = function(event) {
            jQuery('#modal-backdrop').
                unbind('click', closeModal).
                css({ display: 'none' });
            jQuery('body').
                unbind('keyup', escapeEvent).
                removeClass('modal-open');
            jQuery('#'+attrs.modalId).css({ display: 'none' });
        };

        //Bind modalOpen and modalClose events, so outsiders...