Last active
September 30, 2021 14:36
-
-
Save shlomohass/c1c4c27e4dda3de52d57 to your computer and use it in GitHub Desktop.
This is an example of the only modals use from bootstrap 3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>Bootstrap Modals only - by shlomo hassid</title> | |
| <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script> | |
| <style type='text/css'> | |
| [role="button"] { | |
| cursor: pointer; | |
| } | |
| .modal-open { | |
| overflow: hidden; | |
| } | |
| .modal { | |
| display: none; | |
| overflow: hidden; | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 1050; | |
| -webkit-overflow-scrolling: touch; | |
| outline: 0; | |
| } | |
| .modal.fade .modal-dialog { | |
| -webkit-transform: translate(0, -25%); | |
| -ms-transform: translate(0, -25%); | |
| -o-transform: translate(0, -25%); | |
| transform: translate(0, -25%); | |
| -webkit-transition: -webkit-transform 0.3s ease-out; | |
| -o-transition: -o-transform 0.3s ease-out; | |
| transition: transform 0.3s ease-out; | |
| } | |
| .modal.in .modal-dialog { | |
| -webkit-transform: translate(0, 0); | |
| -ms-transform: translate(0, 0); | |
| -o-transform: translate(0, 0); | |
| transform: translate(0, 0); | |
| } | |
| .modal-open .modal { | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| } | |
| .modal-dialog { | |
| position: relative; | |
| width: auto; | |
| margin: 10px; | |
| } | |
| .modal-content { | |
| position: relative; | |
| background-color: #ffffff; | |
| border: 1px solid #999999; | |
| border: 1px solid rgba(0, 0, 0, 0.2); | |
| border-radius: 6px; | |
| -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); | |
| box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); | |
| -webkit-background-clip: padding-box; | |
| background-clip: padding-box; | |
| outline: 0; | |
| } | |
| .modal-backdrop { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 1040; | |
| background-color: #000000; | |
| } | |
| .modal-backdrop.fade { | |
| opacity: 0; | |
| filter: alpha(opacity=0); | |
| } | |
| .modal-backdrop.in { | |
| opacity: 0.5; | |
| filter: alpha(opacity=50); | |
| } | |
| .modal-header { | |
| padding: 15px; | |
| border-bottom: 1px solid #e5e5e5; | |
| min-height: 16.42857143px; | |
| } | |
| .modal-header .close { | |
| margin-top: -2px; | |
| } | |
| .modal-title { | |
| margin: 0; | |
| line-height: 1.42857143; | |
| } | |
| .modal-body { | |
| position: relative; | |
| padding: 15px; | |
| } | |
| .modal-footer { | |
| padding: 15px; | |
| text-align: right; | |
| border-top: 1px solid #e5e5e5; | |
| } | |
| .modal-footer .btn + .btn { | |
| margin-left: 5px; | |
| margin-bottom: 0; | |
| } | |
| .modal-footer .btn-group .btn + .btn { | |
| margin-left: -1px; | |
| } | |
| .modal-footer .btn-block + .btn-block { | |
| margin-left: 0; | |
| } | |
| .modal-scrollbar-measure { | |
| position: absolute; | |
| top: -9999px; | |
| width: 50px; | |
| height: 50px; | |
| overflow: scroll; | |
| } | |
| .close { | |
| float: right; | |
| font-size: 21px; | |
| font-weight: bold; | |
| line-height: 1; | |
| color: #000; | |
| text-shadow: 0 1px 0 #fff; | |
| filter: alpha(opacity=20); | |
| opacity: .2; | |
| } | |
| button.close { | |
| -webkit-appearance: none; | |
| padding: 0; | |
| cursor: pointer; | |
| background: transparent; | |
| border: 0; | |
| } | |
| .close:hover, .close:focus { | |
| color: #000; | |
| text-decoration: none; | |
| cursor: pointer; | |
| filter: alpha(opacity=50); | |
| opacity: .5; | |
| } | |
| @media (min-width: 768px) { | |
| .modal-dialog { | |
| width: 600px; | |
| margin: 30px auto; | |
| } | |
| .modal-content { | |
| -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); | |
| } | |
| .modal-sm { | |
| width: 300px; | |
| } | |
| } | |
| @media (min-width: 992px) { | |
| .modal-lg { | |
| width: 900px; | |
| } | |
| } | |
| [role="button"] { | |
| cursor: pointer; | |
| } | |
| .btn { | |
| display: inline-block; | |
| margin-bottom: 0; | |
| font-weight: normal; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-touch-action: manipulation; | |
| touch-action: manipulation; | |
| cursor: pointer; | |
| background-image: none; | |
| border: 1px solid transparent; | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| line-height: 1.42857143; | |
| border-radius: 4px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .btn:focus, | |
| .btn:active:focus, | |
| .btn.active:focus, | |
| .btn.focus, | |
| .btn:active.focus, | |
| .btn.active.focus { | |
| outline: thin dotted; | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; | |
| } | |
| .btn:hover, | |
| .btn:focus, | |
| .btn.focus { | |
| color: #333333; | |
| text-decoration: none; | |
| } | |
| .btn:active, | |
| .btn.active { | |
| outline: 0; | |
| background-image: none; | |
| -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | |
| } | |
| .btn.disabled, | |
| .btn[disabled], | |
| fieldset[disabled] .btn { | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .btn-default { | |
| color: #333333; | |
| background-color: #ffffff; | |
| border-color: #cccccc; | |
| } | |
| .btn-default:hover, | |
| .btn-default:focus, | |
| .btn-default.focus, | |
| .btn-default:active, | |
| .btn-default.active, | |
| .open > .dropdown-toggle.btn-default { | |
| color: #333333; | |
| background-color: #e6e6e6; | |
| border-color: #adadad; | |
| } | |
| .btn-default:active, | |
| .btn-default.active, | |
| .open > .dropdown-toggle.btn-default { | |
| background-image: none; | |
| } | |
| .btn-default.disabled, | |
| .btn-default[disabled], | |
| fieldset[disabled] .btn-default, | |
| .btn-default.disabled:hover, | |
| .btn-default[disabled]:hover, | |
| fieldset[disabled] .btn-default:hover, | |
| .btn-default.disabled:focus, | |
| .btn-default[disabled]:focus, | |
| fieldset[disabled] .btn-default:focus, | |
| .btn-default.disabled.focus, | |
| .btn-default[disabled].focus, | |
| fieldset[disabled] .btn-default.focus, | |
| .btn-default.disabled:active, | |
| .btn-default[disabled]:active, | |
| fieldset[disabled] .btn-default:active, | |
| .btn-default.disabled.active, | |
| .btn-default[disabled].active, | |
| fieldset[disabled] .btn-default.active { | |
| background-color: #ffffff; | |
| border-color: #cccccc; | |
| } | |
| .btn-default .badge { | |
| color: #ffffff; | |
| background-color: #333333; | |
| } | |
| .btn-primary { | |
| color: #ffffff; | |
| background-color: #337ab7; | |
| border-color: #2e6da4; | |
| } | |
| .btn-primary:hover, | |
| .btn-primary:focus, | |
| .btn-primary.focus, | |
| .btn-primary:active, | |
| .btn-primary.active, | |
| .open > .dropdown-toggle.btn-primary { | |
| color: #ffffff; | |
| background-color: #286090; | |
| border-color: #204d74; | |
| } | |
| .btn-primary:active, | |
| .btn-primary.active, | |
| .open > .dropdown-toggle.btn-primary { | |
| background-image: none; | |
| } | |
| .btn-primary.disabled, | |
| .btn-primary[disabled], | |
| fieldset[disabled] .btn-primary, | |
| .btn-primary.disabled:hover, | |
| .btn-primary[disabled]:hover, | |
| fieldset[disabled] .btn-primary:hover, | |
| .btn-primary.disabled:focus, | |
| .btn-primary[disabled]:focus, | |
| fieldset[disabled] .btn-primary:focus, | |
| .btn-primary.disabled.focus, | |
| .btn-primary[disabled].focus, | |
| fieldset[disabled] .btn-primary.focus, | |
| .btn-primary.disabled:active, | |
| .btn-primary[disabled]:active, | |
| fieldset[disabled] .btn-primary:active, | |
| .btn-primary.disabled.active, | |
| .btn-primary[disabled].active, | |
| fieldset[disabled] .btn-primary.active { | |
| background-color: #337ab7; | |
| border-color: #2e6da4; | |
| } | |
| .btn-primary .badge { | |
| color: #337ab7; | |
| background-color: #ffffff; | |
| } | |
| .btn-success { | |
| color: #ffffff; | |
| background-color: #5cb85c; | |
| border-color: #4cae4c; | |
| } | |
| .btn-success:hover, | |
| .btn-success:focus, | |
| .btn-success.focus, | |
| .btn-success:active, | |
| .btn-success.active, | |
| .open > .dropdown-toggle.btn-success { | |
| color: #ffffff; | |
| background-color: #449d44; | |
| border-color: #398439; | |
| } | |
| .btn-success:active, | |
| .btn-success.active, | |
| .open > .dropdown-toggle.btn-success { | |
| background-image: none; | |
| } | |
| .btn-success.disabled, | |
| .btn-success[disabled], | |
| fieldset[disabled] .btn-success, | |
| .btn-success.disabled:hover, | |
| .btn-success[disabled]:hover, | |
| fieldset[disabled] .btn-success:hover, | |
| .btn-success.disabled:focus, | |
| .btn-success[disabled]:focus, | |
| fieldset[disabled] .btn-success:focus, | |
| .btn-success.disabled.focus, | |
| .btn-success[disabled].focus, | |
| fieldset[disabled] .btn-success.focus, | |
| .btn-success.disabled:active, | |
| .btn-success[disabled]:active, | |
| fieldset[disabled] .btn-success:active, | |
| .btn-success.disabled.active, | |
| .btn-success[disabled].active, | |
| fieldset[disabled] .btn-success.active { | |
| background-color: #5cb85c; | |
| border-color: #4cae4c; | |
| } | |
| .btn-success .badge { | |
| color: #5cb85c; | |
| background-color: #ffffff; | |
| } | |
| .btn-info { | |
| color: #ffffff; | |
| background-color: #5bc0de; | |
| border-color: #46b8da; | |
| } | |
| .btn-info:hover, | |
| .btn-info:focus, | |
| .btn-info.focus, | |
| .btn-info:active, | |
| .btn-info.active, | |
| .open > .dropdown-toggle.btn-info { | |
| color: #ffffff; | |
| background-color: #31b0d5; | |
| border-color: #269abc; | |
| } | |
| .btn-info:active, | |
| .btn-info.active, | |
| .open > .dropdown-toggle.btn-info { | |
| background-image: none; | |
| } | |
| .btn-info.disabled, | |
| .btn-info[disabled], | |
| fieldset[disabled] .btn-info, | |
| .btn-info.disabled:hover, | |
| .btn-info[disabled]:hover, | |
| fieldset[disabled] .btn-info:hover, | |
| .btn-info.disabled:focus, | |
| .btn-info[disabled]:focus, | |
| fieldset[disabled] .btn-info:focus, | |
| .btn-info.disabled.focus, | |
| .btn-info[disabled].focus, | |
| fieldset[disabled] .btn-info.focus, | |
| .btn-info.disabled:active, | |
| .btn-info[disabled]:active, | |
| fieldset[disabled] .btn-info:active, | |
| .btn-info.disabled.active, | |
| .btn-info[disabled].active, | |
| fieldset[disabled] .btn-info.active { | |
| background-color: #5bc0de; | |
| border-color: #46b8da; | |
| } | |
| .btn-info .badge { | |
| color: #5bc0de; | |
| background-color: #ffffff; | |
| } | |
| .btn-warning { | |
| color: #ffffff; | |
| background-color: #f0ad4e; | |
| border-color: #eea236; | |
| } | |
| .btn-warning:hover, | |
| .btn-warning:focus, | |
| .btn-warning.focus, | |
| .btn-warning:active, | |
| .btn-warning.active, | |
| .open > .dropdown-toggle.btn-warning { | |
| color: #ffffff; | |
| background-color: #ec971f; | |
| border-color: #d58512; | |
| } | |
| .btn-warning:active, | |
| .btn-warning.active, | |
| .open > .dropdown-toggle.btn-warning { | |
| background-image: none; | |
| } | |
| .btn-warning.disabled, | |
| .btn-warning[disabled], | |
| fieldset[disabled] .btn-warning, | |
| .btn-warning.disabled:hover, | |
| .btn-warning[disabled]:hover, | |
| fieldset[disabled] .btn-warning:hover, | |
| .btn-warning.disabled:focus, | |
| .btn-warning[disabled]:focus, | |
| fieldset[disabled] .btn-warning:focus, | |
| .btn-warning.disabled.focus, | |
| .btn-warning[disabled].focus, | |
| fieldset[disabled] .btn-warning.focus, | |
| .btn-warning.disabled:active, | |
| .btn-warning[disabled]:active, | |
| fieldset[disabled] .btn-warning:active, | |
| .btn-warning.disabled.active, | |
| .btn-warning[disabled].active, | |
| fieldset[disabled] .btn-warning.active { | |
| background-color: #f0ad4e; | |
| border-color: #eea236; | |
| } | |
| .btn-warning .badge { | |
| color: #f0ad4e; | |
| background-color: #ffffff; | |
| } | |
| .btn-danger { | |
| color: #ffffff; | |
| background-color: #d9534f; | |
| border-color: #d43f3a; | |
| } | |
| .btn-danger:hover, | |
| .btn-danger:focus, | |
| .btn-danger.focus, | |
| .btn-danger:active, | |
| .btn-danger.active, | |
| .open > .dropdown-toggle.btn-danger { | |
| color: #ffffff; | |
| background-color: #c9302c; | |
| border-color: #ac2925; | |
| } | |
| .btn-danger:active, | |
| .btn-danger.active, | |
| .open > .dropdown-toggle.btn-danger { | |
| background-image: none; | |
| } | |
| .btn-danger.disabled, | |
| .btn-danger[disabled], | |
| fieldset[disabled] .btn-danger, | |
| .btn-danger.disabled:hover, | |
| .btn-danger[disabled]:hover, | |
| fieldset[disabled] .btn-danger:hover, | |
| .btn-danger.disabled:focus, | |
| .btn-danger[disabled]:focus, | |
| fieldset[disabled] .btn-danger:focus, | |
| .btn-danger.disabled.focus, | |
| .btn-danger[disabled].focus, | |
| fieldset[disabled] .btn-danger.focus, | |
| .btn-danger.disabled:active, | |
| .btn-danger[disabled]:active, | |
| fieldset[disabled] .btn-danger:active, | |
| .btn-danger.disabled.active, | |
| .btn-danger[disabled].active, | |
| fieldset[disabled] .btn-danger.active { | |
| background-color: #d9534f; | |
| border-color: #d43f3a; | |
| } | |
| .btn-danger .badge { | |
| color: #d9534f; | |
| background-color: #ffffff; | |
| } | |
| .btn-link { | |
| color: #337ab7; | |
| font-weight: normal; | |
| border-radius: 0; | |
| } | |
| .btn-link, | |
| .btn-link:active, | |
| .btn-link.active, | |
| .btn-link[disabled], | |
| fieldset[disabled] .btn-link { | |
| background-color: transparent; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .btn-link, | |
| .btn-link:hover, | |
| .btn-link:focus, | |
| .btn-link:active { | |
| border-color: transparent; | |
| } | |
| .btn-link:hover, | |
| .btn-link:focus { | |
| color: #23527c; | |
| text-decoration: underline; | |
| background-color: transparent; | |
| } | |
| .btn-link[disabled]:hover, | |
| fieldset[disabled] .btn-link:hover, | |
| .btn-link[disabled]:focus, | |
| fieldset[disabled] .btn-link:focus { | |
| color: #777777; | |
| text-decoration: none; | |
| } | |
| .btn-lg { | |
| padding: 10px 16px; | |
| font-size: 18px; | |
| line-height: 1.3333333; | |
| border-radius: 6px; | |
| } | |
| .btn-sm { | |
| padding: 5px 10px; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| border-radius: 3px; | |
| } | |
| .btn-xs { | |
| padding: 1px 5px; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| border-radius: 3px; | |
| } | |
| .btn-block { | |
| display: block; | |
| width: 100%; | |
| } | |
| .btn-block + .btn-block { | |
| margin-top: 5px; | |
| } | |
| input[type="submit"].btn-block, | |
| input[type="reset"].btn-block, | |
| input[type="button"].btn-block { | |
| width: 100%; | |
| } | |
| .clearfix:before, | |
| .clearfix:after, | |
| .modal-footer:before, | |
| .modal-footer:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .clearfix:after, | |
| .modal-footer:after { | |
| clear: both; | |
| } | |
| .center-block { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .pull-right { | |
| float: right !important; | |
| } | |
| .pull-left { | |
| float: left !important; | |
| } | |
| .hide { | |
| display: none !important; | |
| } | |
| .show { | |
| display: block !important; | |
| } | |
| .invisible { | |
| visibility: hidden; | |
| } | |
| .text-hide { | |
| font: 0/0 a; | |
| color: transparent; | |
| text-shadow: none; | |
| background-color: transparent; | |
| border: 0; | |
| } | |
| .hidden { | |
| display: none !important; | |
| } | |
| .affix { | |
| position: fixed; | |
| } | |
| </style> | |
| <script type='text/javascript'>//<![CDATA[ | |
| $(window).load(function(){ | |
| /* | |
| * To change this license header, choose License Headers in Project Properties. | |
| * To change this template file, choose Tools | Templates | |
| * and open the template in the editor. | |
| */ | |
| /*! | |
| * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=4cc52633a8e49b1aac11) | |
| * Config saved to config.json and https://gist.github.com/4cc52633a8e49b1aac11 | |
| */ | |
| if (typeof jQuery === 'undefined') { | |
| throw new Error('Bootstrap\'s JavaScript requires jQuery') | |
| } | |
| +function ($) { | |
| 'use strict'; | |
| var version = $.fn.jquery.split(' ')[0].split('.') | |
| if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) { | |
| throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher') | |
| } | |
| }(jQuery); | |
| /* ======================================================================== | |
| * Bootstrap: modal.js v3.3.4 | |
| * http://getbootstrap.com/javascript/#modals | |
| * ======================================================================== | |
| * Copyright 2011-2015 Twitter, Inc. | |
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
| * ======================================================================== */ | |
| +function ($) { | |
| 'use strict'; | |
| // MODAL CLASS DEFINITION | |
| // ====================== | |
| var Modal = function (element, options) { | |
| this.options = options | |
| this.$body = $(document.body) | |
| this.$element = $(element) | |
| this.$dialog = this.$element.find('.modal-dialog') | |
| this.$backdrop = null | |
| this.isShown = null | |
| this.originalBodyPad = null | |
| this.scrollbarWidth = 0 | |
| this.ignoreBackdropClick = false | |
| if (this.options.remote) { | |
| this.$element | |
| .find('.modal-content') | |
| .load(this.options.remote, $.proxy(function () { | |
| this.$element.trigger('loaded.bs.modal') | |
| }, this)) | |
| } | |
| } | |
| Modal.VERSION = '3.3.4' | |
| Modal.TRANSITION_DURATION = 300 | |
| Modal.BACKDROP_TRANSITION_DURATION = 150 | |
| Modal.DEFAULTS = { | |
| backdrop: true, | |
| keyboard: true, | |
| show: true | |
| } | |
| Modal.prototype.toggle = function (_relatedTarget) { | |
| return this.isShown ? this.hide() : this.show(_relatedTarget) | |
| } | |
| Modal.prototype.show = function (_relatedTarget) { | |
| var that = this | |
| var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) | |
| this.$element.trigger(e) | |
| if (this.isShown || e.isDefaultPrevented()) return | |
| this.isShown = true | |
| this.checkScrollbar() | |
| this.setScrollbar() | |
| this.$body.addClass('modal-open') | |
| this.escape() | |
| this.resize() | |
| this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) | |
| this.$dialog.on('mousedown.dismiss.bs.modal', function () { | |
| that.$element.one('mouseup.dismiss.bs.modal', function (e) { | |
| if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true | |
| }) | |
| }) | |
| this.backdrop(function () { | |
| var transition = $.support.transition && that.$element.hasClass('fade') | |
| if (!that.$element.parent().length) { | |
| that.$element.appendTo(that.$body) // don't move modals dom position | |
| } | |
| that.$element | |
| .show() | |
| .scrollTop(0) | |
| that.adjustDialog() | |
| if (transition) { | |
| that.$element[0].offsetWidth // force reflow | |
| } | |
| that.$element | |
| .addClass('in') | |
| .attr('aria-hidden', false) | |
| that.enforceFocus() | |
| var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) | |
| transition ? | |
| that.$dialog // wait for modal to slide in | |
| .one('bsTransitionEnd', function () { | |
| that.$element.trigger('focus').trigger(e) | |
| }) | |
| .emulateTransitionEnd(Modal.TRANSITION_DURATION) : | |
| that.$element.trigger('focus').trigger(e) | |
| }) | |
| } | |
| Modal.prototype.hide = function (e) { | |
| if (e) e.preventDefault() | |
| e = $.Event('hide.bs.modal') | |
| this.$element.trigger(e) | |
| if (!this.isShown || e.isDefaultPrevented()) return | |
| this.isShown = false | |
| this.escape() | |
| this.resize() | |
| $(document).off('focusin.bs.modal') | |
| this.$element | |
| .removeClass('in') | |
| .attr('aria-hidden', true) | |
| .off('click.dismiss.bs.modal') | |
| .off('mouseup.dismiss.bs.modal') | |
| this.$dialog.off('mousedown.dismiss.bs.modal') | |
| $.support.transition && this.$element.hasClass('fade') ? | |
| this.$element | |
| .one('bsTransitionEnd', $.proxy(this.hideModal, this)) | |
| .emulateTransitionEnd(Modal.TRANSITION_DURATION) : | |
| this.hideModal() | |
| } | |
| Modal.prototype.enforceFocus = function () { | |
| $(document) | |
| .off('focusin.bs.modal') // guard against infinite focus loop | |
| .on('focusin.bs.modal', $.proxy(function (e) { | |
| if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { | |
| this.$element.trigger('focus') | |
| } | |
| }, this)) | |
| } | |
| Modal.prototype.escape = function () { | |
| if (this.isShown && this.options.keyboard) { | |
| this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) { | |
| e.which == 27 && this.hide() | |
| }, this)) | |
| } else if (!this.isShown) { | |
| this.$element.off('keydown.dismiss.bs.modal') | |
| } | |
| } | |
| Modal.prototype.resize = function () { | |
| if (this.isShown) { | |
| $(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this)) | |
| } else { | |
| $(window).off('resize.bs.modal') | |
| } | |
| } | |
| Modal.prototype.hideModal = function () { | |
| var that = this | |
| this.$element.hide() | |
| this.backdrop(function () { | |
| that.$body.removeClass('modal-open') | |
| that.resetAdjustments() | |
| that.resetScrollbar() | |
| that.$element.trigger('hidden.bs.modal') | |
| }) | |
| } | |
| Modal.prototype.removeBackdrop = function () { | |
| this.$backdrop && this.$backdrop.remove() | |
| this.$backdrop = null | |
| } | |
| Modal.prototype.backdrop = function (callback) { | |
| var that = this | |
| var animate = this.$element.hasClass('fade') ? 'fade' : '' | |
| if (this.isShown && this.options.backdrop) { | |
| var doAnimate = $.support.transition && animate | |
| this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') | |
| .appendTo(this.$body) | |
| this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) { | |
| if (this.ignoreBackdropClick) { | |
| this.ignoreBackdropClick = false | |
| return | |
| } | |
| if (e.target !== e.currentTarget) return | |
| this.options.backdrop == 'static' | |
| ? this.$element[0].focus() | |
| : this.hide() | |
| }, this)) | |
| if (doAnimate) this.$backdrop[0].offsetWidth // force reflow | |
| this.$backdrop.addClass('in') | |
| if (!callback) return | |
| doAnimate ? | |
| this.$backdrop | |
| .one('bsTransitionEnd', callback) | |
| .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) : | |
| callback() | |
| } else if (!this.isShown && this.$backdrop) { | |
| this.$backdrop.removeClass('in') | |
| var callbackRemove = function () { | |
| that.removeBackdrop() | |
| callback && callback() | |
| } | |
| $.support.transition && this.$element.hasClass('fade') ? | |
| this.$backdrop | |
| .one('bsTransitionEnd', callbackRemove) | |
| .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) : | |
| callbackRemove() | |
| } else if (callback) { | |
| callback() | |
| } | |
| } | |
| // these following methods are used to handle overflowing modals | |
| Modal.prototype.handleUpdate = function () { | |
| this.adjustDialog() | |
| } | |
| Modal.prototype.adjustDialog = function () { | |
| var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight | |
| this.$element.css({ | |
| paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', | |
| paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' | |
| }) | |
| } | |
| Modal.prototype.resetAdjustments = function () { | |
| this.$element.css({ | |
| paddingLeft: '', | |
| paddingRight: '' | |
| }) | |
| } | |
| Modal.prototype.checkScrollbar = function () { | |
| var fullWindowWidth = window.innerWidth | |
| if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8 | |
| var documentElementRect = document.documentElement.getBoundingClientRect() | |
| fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left) | |
| } | |
| this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth | |
| this.scrollbarWidth = this.measureScrollbar() | |
| } | |
| Modal.prototype.setScrollbar = function () { | |
| var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) | |
| this.originalBodyPad = document.body.style.paddingRight || '' | |
| if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) | |
| } | |
| Modal.prototype.resetScrollbar = function () { | |
| this.$body.css('padding-right', this.originalBodyPad) | |
| } | |
| Modal.prototype.measureScrollbar = function () { // thx walsh | |
| var scrollDiv = document.createElement('div') | |
| scrollDiv.className = 'modal-scrollbar-measure' | |
| this.$body.append(scrollDiv) | |
| var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth | |
| this.$body[0].removeChild(scrollDiv) | |
| return scrollbarWidth | |
| } | |
| // MODAL PLUGIN DEFINITION | |
| // ======================= | |
| function Plugin(option, _relatedTarget) { | |
| return this.each(function () { | |
| var $this = $(this) | |
| var data = $this.data('bs.modal') | |
| var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option) | |
| if (!data) $this.data('bs.modal', (data = new Modal(this, options))) | |
| if (typeof option == 'string') data[option](_relatedTarget) | |
| else if (options.show) data.show(_relatedTarget) | |
| }) | |
| } | |
| var old = $.fn.modal | |
| $.fn.modal = Plugin | |
| $.fn.modal.Constructor = Modal | |
| // MODAL NO CONFLICT | |
| // ================= | |
| $.fn.modal.noConflict = function () { | |
| $.fn.modal = old | |
| return this | |
| } | |
| // MODAL DATA-API | |
| // ============== | |
| $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { | |
| var $this = $(this) | |
| var href = $this.attr('href') | |
| var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7 | |
| var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) | |
| if ($this.is('a')) e.preventDefault() | |
| $target.one('show.bs.modal', function (showEvent) { | |
| if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown | |
| $target.one('hidden.bs.modal', function () { | |
| $this.is(':visible') && $this.trigger('focus') | |
| }) | |
| }) | |
| Plugin.call($target, option, this) | |
| }) | |
| }(jQuery); | |
| });//]]> | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Button HTML (to Trigger Modal) --> | |
| <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a> | |
| <!-- Modal HTML --> | |
| <div id="myModal" class="modal fade"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
| <h4 class="modal-title">Confirmation</h4> | |
| </div> | |
| <div class="modal-body"> | |
| <p>Do you want to save changes you made to document before closing?</p> | |
| <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment