├── .gitignore ├── README.md ├── bootstrap-scroll-modal.css ├── bootstrap-scroll-modal.js ├── example.html └── originals ├── bootstrap-modal.js ├── bootstrap-responsive.css ├── bootstrap-transition.js └── bootstrap.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Numerous always-ignore extensions 2 | *.diff 3 | *.err 4 | *.orig 5 | *.log 6 | *.rej 7 | *.swo 8 | *.swp 9 | *.vi 10 | *~ 11 | *.sass-cache 12 | 13 | # OS or Editor folders 14 | .DS_Store 15 | ._* 16 | Thumbs.db 17 | .cache 18 | .project 19 | .settings 20 | .tmproj 21 | *.esproj 22 | nbproject 23 | *.sublime-project 24 | *.sublime-workspace 25 | 26 | # Komodo 27 | *.komodoproject 28 | .komodotools 29 | 30 | # Folders to ignore 31 | .hg 32 | .svn 33 | .CVS 34 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Notice: You no longer need this project 2 | --------------------------------------- 3 | 4 | I built this project because I (and apparently some other people) found this very useful at the time. However, a scrolling modal is now a standard part of Bootstrap 3.0. If what's included in 3.0 doesn't suit your needs or you're still using Bootstrap < 3, then check out https://github.com/jschr/bootstrap-modal 5 | 6 | Bootstrap Scroll Modal v 1.2 7 | ============================ 8 | 9 | Twitter Bootstrap's current modal has a fixed height and scrolls long content inside of it. This version of the plugin, along with some minimal CSS allows you to have a modal that acts more like Facebook and Trello modals, where the content can be any height and the whole page scrolls, rather than internal scrollbars in the modal. [View it in action here](http://aroc.github.com/Bootstrap-Scroll-Modal/example.html "Bootstrap Scroll Modal Example"). 10 | 11 | How to Use 12 | ---------- 13 | 14 | Simply use this version of the Modal Plugin rather than Twitter Bootstraps. It works exactly the same way the original plugin does. There are only minor differences which relate to how the HTML markup is inserted, which allows for the full page scroll. 15 | 16 | Then include the Stylesheet. Ensure to include it AFTER bootstrap.css, as it overrides some of the modal classes found in it. You can also just add the minmal CSS to one of your project's CSS files, as long as it comes after Bootstrap.css. 17 | 18 | In order to activate the new modal, set the "dynamic" option to "true". If the option is not set, the modal acts the same as it always has - allowing for full backward compatibility. 19 | 20 | Example 21 | ------- 22 | 23 | `Launch the awesome modal` 24 | 25 | and 26 | 27 | `$("#myModal").modal({ 28 | dynamic: true 29 | });` 30 | 31 | Cross-Browser Tested 32 | -------------------- 33 | 34 | I've tested the modal on IE7+, Safari, Firefox 4+ and Chrome. Let me know if you find any compatibility issues. 35 | -------------------------------------------------------------------------------- /bootstrap-scroll-modal.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Scroll Modal 3 | * Version: 1.2 4 | * Made for your convenience by @theericanderson 5 | * A variaton of but a small piece of the insanely awesome Twitter Bootstrap (http://twitter.github.com/bootstrap) 6 | */ 7 | 8 | .modal-backdrop { 9 | overflow-x: hidden; 10 | overflow-y: auto; 11 | background-color: rgba(0, 0, 0, 0.8); 12 | } 13 | .modal-backdrop.fade { 14 | background-color: rgba(0, 0, 0, 0.0); 15 | } 16 | .modal-backdrop.fade.in { 17 | background: rgba(0, 0, 0, 0.8); 18 | } 19 | .modal-backdrop.in, .modal-backdrop.fade.in { 20 | opacity: 1.0; 21 | filter: alpha(opacity=100); 22 | } 23 | .modal-wrapper { 24 | position: relative; 25 | top: 50px; 26 | left: 50%; 27 | z-index: 1050; 28 | width: 560px; 29 | margin-left: -280px; 30 | margin-bottom: 100px; 31 | overflow: visible; 32 | } 33 | .modal-wrapper .modal { 34 | position: static; 35 | margin: 0; 36 | z-index: 1060; 37 | } 38 | /* Some different styling for dynamic height modals */ 39 | .modal-wrapper .modal .modal-body { 40 | overflow-y: visible; 41 | max-height: none; 42 | z-index: 1060; /* IE8 fix for radio button focus / blur issue */ 43 | } 44 | 45 | /* Styles to ensure Scroll Modal works on smaller browsers, specifically mobile. */ 46 | @media (max-width: 767px) { 47 | .modal-wrapper { 48 | position: relative; 49 | top: 50px; 50 | left: 20%; 51 | z-index: 1050; 52 | width: 70%; 53 | margin-left: 0px; 54 | margin-bottom: 80px; 55 | overflow: visible; 56 | } 57 | } 58 | 59 | @media (max-width : 480px) { 60 | .modal-wrapper { 61 | position: relative; 62 | top: 50px; 63 | left: 10%; 64 | z-index: 1050; 65 | width: 80%; 66 | margin-left: 0px; 67 | margin-bottom: 80px; 68 | overflow: visible; 69 | } 70 | } -------------------------------------------------------------------------------- /bootstrap-scroll-modal.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Scroll Modal 3 | * Version: 1.2 4 | * Made for your convenience by @theericanderson. 5 | * A variaton of only small piece of the insanely awesome 6 | * Twitter Bootstrap (http://twitter.github.com/bootstrap). 7 | */ 8 | 9 | /* ========================================================= 10 | * bootstrap-modal.js v2.2.1 11 | * http://twitter.github.com/bootstrap/javascript.html#modals 12 | * ========================================================= 13 | * Copyright 2012 Twitter, Inc. 14 | * 15 | * Licensed under the Apache License, Version 2.0 (the "License"); 16 | * you may not use this file except in compliance with the License. 17 | * You may obtain a copy of the License at 18 | * 19 | * http://www.apache.org/licenses/LICENSE-2.0 20 | * 21 | * Unless required by applicable law or agreed to in writing, software 22 | * distributed under the License is distributed on an "AS IS" BASIS, 23 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 24 | * See the License for the specific language governing permissions and 25 | * limitations under the License. 26 | * ========================================================= */ 27 | 28 | 29 | !function ($) { 30 | 31 | "use strict"; // jshint ;_; 32 | 33 | /* MODAL CLASS DEFINITION 34 | * ====================== */ 35 | 36 | var Modal = function (element, options) { 37 | this.options = options 38 | this.$element = $(element) 39 | .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) 40 | this.options.remote && this.$element.find('.modal-body').load(this.options.remote) 41 | } 42 | 43 | Modal.prototype = { 44 | 45 | constructor: Modal 46 | 47 | , toggle: function () { 48 | return this[!this.isShown ? 'show' : 'hide']() 49 | } 50 | 51 | , show: function () { 52 | var that = this 53 | , e = $.Event('show') 54 | 55 | if (this.isShown || e.isDefaultPrevented()) return 56 | 57 | this.isShown = true 58 | 59 | this.escape() 60 | 61 | if (this.options.dynamic) { 62 | this.$elementWrapper = $('