Extending Bootstrap 3 Modal

reviewed on CodeReview

by Robert Dodd

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>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" id="showModal">Open</button>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">My awesome modal</h4>

            </div>
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel condimentum velit. Praesent sed velit vel justo tempor iaculis sed ut felis. Quisque eleifend suscipit mi. Curabitur eget est eros. Duis sed felis id sapien rhoncus lacinia bibendum ut nulla. Aenean pharetra commodo est, hendrerit fermentum nisl eleifend quis. In sit amet ante turpis. Cras aliquam tempor ipsum, eget tincidunt sapien vehicula ac. Cras sit amet rhoncus neque. Donec quis lobortis lectus, sed aliquam sapien. Maecenas volutpat semper egestas. Nunc tincidunt mi aliquet urna rutrum pharetra. Donec accumsan pretium metus non congue. Nam lectus nisl, rutrum vitae enim et, aliquet ornare sem. Suspendisse nunc lectus, eleifend eu lacus ac, pulvinar volutpat nibh. Phasellus sit amet erat vel erat mollis pellentesque. Aenean in rhoncus tortor. Proin vestibulum metus ligula, eu pharetra ligula pharetra sit amet. Proin rutrum odio vitae ipsum pulvinar porta. Mauris sit amet neque ante. Vivamus malesuada felis in posuere bibendum. Vestibulum vel eros tincidunt, aliquam quam pulvinar, scelerisque velit. Quisque fermentum eleifend nunc, nec lacinia dui tincidunt quis. Vivamus molestie felis eros, eget venenatis enim aliquet ut. Sed id velit...

CSS

.modal-body {
    position: absolute;
    top: 46px;
    bottom: 54px;
    overflow-y: scroll;
}
.modal {
    overflow: hidden;
}
.modal-dialog {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 50px;
    right: 50px;
    margin: 0;
}
@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin: 0;
    }
}
.modal-footer {
    position: absolute;
    bottom: 0;
    left:0;
    right:0;
}
.modal-header, .modal-body, .modal-footer {
    padding: 10px;
}
.modal-content {
    height: 100%;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.modal-backdrop {
    background-color: #fff;
}
.modal-header .close {
    margin-top: 3px;
}
.btn {
    border-radius: 0;
}

JavaScript

(function ($) {
  var _original = $.fn.modal.Constructor.prototype.hide;

  function trigger(target, name, relatedTarget) {
      target.trigger($.Event(name, { relatedTarget: relatedTarget }));
  }
    
  $.extend($.fn.modal.Constructor.DEFAULTS, {
     fooMsg: 'SuperBob!'
  });

  $.extend($.fn.modal.Constructor.prototype, {
      hide: function (_relatedTarget) {
          if (!this.isLocked)
              return _original.call(this, _relatedTarget);
    },

    lock: function (_relatedTarget) {
      this.isLocked = true;
      trigger(this.$element, 'lock.bs.modal', _relatedTarget);
    },

    unlock: function (_relatedTarget) {
        this.isLocked = false;
        trigger(this.$element, 'unlock.bs.modal', _relatedTarget);
    },

    superBob: function (_relatedTarget) {
        alert(this.options.fooMsg);
    }
  });
})(jQuery);


$(document).ready(function () {
    $('#myModal').on('lock.bs.modal', function (e) {
        console.log('modal locked');
        $('#lock').addClass('disabled');
        $('#unlock').removeClass('disabled');
    });

    $('#myModal').on('unlock.bs.modal', function (e) {
        console.log('modal unlocked');
        $('#unlock').addClass('disabled');
        $('#lock').removeClass('disabled');
    });

    $('body').on('click', '#showModal', function (e) {
        e.preventDefault();
        var $modal = $('#myModal').modal({ fooMsg: 'Hi bob...' });
        $modal.modal('show');
        $modal.modal('superBob');
        $('#unlock').addClass('disabled');
    });

    $('body').on('click', '#lock', function (e) {
        e.preventDefault();
        $('#myModal').modal('lock');
    });

    $('body').on('click', '#unlock', function (e) {
        e.preventDefault();
        $('#myModal').modal('unlock');
    });
});