├── .gitignore ├── License.pdf ├── README.md ├── css ├── enhanced-modals.css └── enhanced-modals.min.css ├── js ├── enhanced-modals.js └── enhanced-modals.min.js ├── package.json └── sass └── enhanced-modals.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependency directories 2 | node_modules 3 | jspm_packages -------------------------------------------------------------------------------- /License.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/Enhanced-Bootstrap-Modals/451a85158d508d91550209d97a3a61682d7f9135/License.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Enhanced Bootstrap Modals 2 | 3 | Set of responsive modals based on the latest Bootstrap 4 and jQuery that do not need MDB (Material Design for Bootstrap) styling to work properly. 4 | 5 | They add new modal designs to a classic Bootstrap, such as: 6 | 7 | - Frame modal 8 | - Side modal 9 | - Central modal 10 | - Fluid modal 11 | 12 | They come in different sizes and with different positions options as seen on the documentation page: 13 | https://mdbootstrap.com/javascript/modals/ 14 | 15 | Free for both personal and commercial use. 16 | -------------------------------------------------------------------------------- /css/enhanced-modals.css: -------------------------------------------------------------------------------- 1 | /* 2 | Enhanced Bootstrap Modals 3 | (C) 2017 MDBootstrap 4 | https://mdbootstrap.com 5 | office@mdbootstrap.com 6 | */ 7 | body.modal-open { 8 | padding-right: 0 !important; } 9 | 10 | body.scrollable { 11 | overflow-y: auto; } 12 | 13 | .modal .modal-header .modal-title { 14 | font-weight: 300; } 15 | 16 | @media (min-width: 768px) { 17 | .modal .modal-dialog.modal-top { 18 | top: 0; } 19 | .modal .modal-dialog.modal-left { 20 | left: 0; } 21 | .modal .modal-dialog.modal-right { 22 | right: 0; } 23 | .modal .modal-dialog.modal-bottom { 24 | bottom: 0; } 25 | .modal .modal-dialog.modal-top-left { 26 | top: 10px; 27 | left: 10px; } 28 | .modal .modal-dialog.modal-top-right { 29 | top: 10px; 30 | right: 10px; } 31 | .modal .modal-dialog.modal-bottom-left { 32 | left: 10px; 33 | bottom: 10px; } 34 | .modal .modal-dialog.modal-bottom-right { 35 | right: 10px; 36 | bottom: 10px; } } 37 | 38 | .modal.fade.top:not(.show) .modal-dialog { 39 | -webkit-transform: translate3d(0, -25%, 0); 40 | transform: translate3d(0, -25%, 0); } 41 | 42 | .modal.fade.left:not(.show) .modal-dialog { 43 | -webkit-transform: translate3d(-25%, 0, 0); 44 | transform: translate3d(-25%, 0, 0); } 45 | 46 | .modal.fade.right:not(.show) .modal-dialog { 47 | -webkit-transform: translate3d(25%, 0, 0); 48 | transform: translate3d(25%, 0, 0); } 49 | 50 | .modal.fade.bottom:not(.show) .modal-dialog { 51 | -webkit-transform: translate3d(0, 25%, 0); 52 | transform: translate3d(0, 25%, 0); } 53 | 54 | @media (min-width: 768px) { 55 | .modal.modal-scrolling { 56 | position: relative; } 57 | .modal.modal-scrolling .modal-dialog { 58 | position: fixed; 59 | z-index: 1050; } 60 | .modal .modal-fluid { 61 | width: 100%; 62 | max-width: 100%; } 63 | .modal .modal-fluid .modal-content { 64 | width: 100%; } 65 | .modal .modal-frame { 66 | position: absolute; 67 | width: 100%; 68 | max-width: 100%; 69 | margin: 0; } 70 | .modal .modal-frame.modal-bottom { 71 | bottom: 0; } 72 | .modal .modal-full-height { 73 | display: -webkit-box; 74 | display: -webkit-flex; 75 | display: -ms-flexbox; 76 | display: flex; 77 | position: absolute; 78 | width: 400px; 79 | height: 100%; 80 | margin: 0; 81 | top: 0; 82 | bottom: 0; 83 | right: 0; } 84 | .modal .modal-full-height.modal-top, .modal .modal-full-height.modal-bottom { 85 | display: block; 86 | width: 100%; 87 | max-width: 100%; 88 | height: auto; } 89 | .modal .modal-full-height.modal-top { 90 | bottom: auto; } 91 | .modal .modal-full-height.modal-bottom { 92 | top: auto; } 93 | .modal .modal-side { 94 | position: absolute; 95 | right: 10px; 96 | bottom: 10px; 97 | margin: 0; 98 | width: 400px; } } 99 | -------------------------------------------------------------------------------- /css/enhanced-modals.min.css: -------------------------------------------------------------------------------- 1 | .modal .modal-fluid,.modal .modal-frame{width:100%;max-width:100%}body.modal-open{padding-right:0!important}body.scrollable{overflow-y:auto}.modal .modal-header .modal-title{font-weight:300}.modal .modal-dialog.modal-top{top:0}.modal .modal-dialog.modal-left{left:0}.modal .modal-dialog.modal-right{right:0}.modal .modal-dialog.modal-bottom{bottom:0}.modal .modal-dialog.modal-top-left{top:10px;left:10px}.modal .modal-dialog.modal-top-right{top:10px;right:10px}.modal .modal-dialog.modal-bottom-left{left:10px;bottom:10px}.modal .modal-dialog.modal-bottom-right{right:10px;bottom:10px}.modal.fade.top:not(.show) .modal-dialog{-webkit-transform:translate3d(0,-25%,0);transform:translate3d(0,-25%,0)}.modal.fade.left:not(.show) .modal-dialog{-webkit-transform:translate3d(-25%,0,0);transform:translate3d(-25%,0,0)}.modal.fade.right:not(.show) .modal-dialog{-webkit-transform:translate3d(25%,0,0);transform:translate3d(25%,0,0)}.modal.fade.bottom:not(.show) .modal-dialog{-webkit-transform:translate3d(0,25%,0);transform:translate3d(0,25%,0)}.modal.modal-scrolling{position:relative}.modal.modal-scrolling .modal-dialog{position:fixed;z-index:1050}.modal .modal-fluid .modal-content{width:100%}.modal .modal-frame{position:absolute;margin:0}.modal .modal-frame.modal-bottom{bottom:0}.modal .modal-full-height{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;width:400px;height:100%;margin:0;top:0;bottom:0;right:0}.modal .modal-full-height.modal-bottom,.modal .modal-full-height.modal-top{display:block;width:100%;max-width:100%;height:auto}.modal .modal-full-height.modal-top{bottom:auto}.modal .modal-full-height.modal-bottom{top:auto}.modal .modal-side{position:absolute;right:10px;bottom:10px;margin:0;width:400px} -------------------------------------------------------------------------------- /js/enhanced-modals.js: -------------------------------------------------------------------------------- 1 | /* 2 | Enhanced Bootstrap Modals 3 | https://mdbootstrap.com 4 | office@mdbootstrap.com 5 | */ 6 | 7 | $('body').on('shown.bs.modal', '.modal', function() { 8 | if($('.modal-backdrop').length) { 9 | } else { 10 | 11 | $modal_dialog = $(this).children('.modal-dialog') 12 | 13 | if($modal_dialog.hasClass('modal-side')) { 14 | $(this).addClass('modal-scrolling'); 15 | $('body').addClass('scrollable'); 16 | } 17 | 18 | if($modal_dialog.hasClass('modal-frame')) { 19 | $(this).addClass('modal-content-clickable'); 20 | $('body').addClass('scrollable'); 21 | } 22 | } 23 | }); 24 | $('body').on('hidden.bs.modal', '.modal', function() { 25 | $('body').removeClass('scrollable'); 26 | }); 27 | -------------------------------------------------------------------------------- /js/enhanced-modals.min.js: -------------------------------------------------------------------------------- 1 | $(".modal").on("shown.bs.modal",function(){$(".modal-backdrop").length||($("body").addClass("scrollable"),$(this).addClass("modal-scrolling"))}),$(".modal").on("hidden.bs.modal",function(){$("body").removeClass("scrollable")}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "enhanced-bootstrap-modals", 3 | "version": "1.0.0", 4 | "description": "Collection of enhanced modals for Twitter Bootstrap", 5 | "main": "enhanced-modals.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/mdbootstrap/enhanced-bootstrap-modals" 12 | }, 13 | "keywords": [ 14 | "bootstrap", 15 | "modals", 16 | "mdbootstrap", 17 | "enhanced" 18 | ], 19 | "author": "MDBootstrap", 20 | "license": "ISC", 21 | "homepage": "https://mdbootstrap.com", 22 | "dependencies": { 23 | "bootstrap": "4.0.0-alpha.6", 24 | "jquery": "^3.2.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /sass/enhanced-modals.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Enhanced Bootstrap Modals 3 | (C) 2017 MDBootstrap 4 | https://mdbootstrap.com 5 | office@mdbootstrap.com 6 | */ 7 | 8 | // Distance 9 | $modal-distance:10px; 10 | 11 | // Styles for body 12 | body { 13 | &.modal-open { 14 | padding-right:0 !important; 15 | } 16 | &.scrollable { 17 | overflow-y:auto; 18 | } 19 | } 20 | 21 | // Enhanced Bootstrap Modals 22 | .modal { 23 | .modal-header { 24 | .modal-title { 25 | font-weight: 300; 26 | } 27 | } 28 | 29 | .modal-dialog { 30 | @media (min-width: 768px) { 31 | &.modal-top { 32 | top:0; 33 | } 34 | &.modal-left { 35 | left:0; 36 | } 37 | &.modal-right { 38 | right:0; 39 | } 40 | &.modal-bottom { 41 | bottom:0; 42 | } 43 | &.modal-top-left { 44 | top:$modal-distance; 45 | left:$modal-distance; 46 | } 47 | &.modal-top-right { 48 | top:$modal-distance; 49 | right:$modal-distance; 50 | } 51 | &.modal-bottom-left { 52 | left:$modal-distance; 53 | bottom:$modal-distance; 54 | } 55 | &.modal-bottom-right { 56 | right:$modal-distance; 57 | bottom:$modal-distance; 58 | } 59 | } 60 | } 61 | 62 | &.fade { 63 | &.top:not(.show) .modal-dialog { 64 | transform: translate3d(0, -25%, 0); 65 | } 66 | &.left:not(.show) .modal-dialog { 67 | transform: translate3d(-25%, 0, 0); 68 | } 69 | &.right:not(.show) .modal-dialog { 70 | transform: translate3d(25%, 0, 0); 71 | } 72 | &.bottom:not(.show) .modal-dialog { 73 | transform: translate3d(0, 25%, 0); 74 | } 75 | } 76 | 77 | @media (min-width:768px) { 78 | &.modal-scrolling { 79 | position:relative; 80 | .modal-dialog { 81 | position:fixed; 82 | z-index:1050; 83 | } 84 | } 85 | 86 | .modal-fluid { 87 | width:100%; 88 | max-width:100%; 89 | .modal-content { 90 | width:100%; 91 | } 92 | } 93 | 94 | .modal-frame { 95 | position:absolute; 96 | width:100%; 97 | max-width:100%; 98 | margin:0; 99 | &.modal-bottom { 100 | bottom:0; 101 | } 102 | } 103 | 104 | .modal-full-height { 105 | display:flex; 106 | position:absolute; 107 | width:400px; 108 | height:100%; 109 | margin:0; 110 | top:0; 111 | bottom:0; 112 | right:0; 113 | &.modal-top, &.modal-bottom { 114 | display:block; 115 | width:100%; 116 | max-width:100%; 117 | height:auto; 118 | } 119 | &.modal-top { 120 | bottom:auto; 121 | } 122 | &.modal-bottom { 123 | top:auto; 124 | } 125 | } 126 | 127 | .modal-side { 128 | position:absolute; 129 | right:$modal-distance; 130 | bottom:$modal-distance; 131 | margin:0; 132 | width:400px; 133 | } 134 | } 135 | } --------------------------------------------------------------------------------