Skip to content

Instantly share code, notes, and snippets.

@tomrallen

tomrallen/Bootstrap 3 only modals.html

Forked from shlomohass/Bootstrap 3 only modals.html
Created February 20, 2018 00:28
Show Gist options
  • Save tomrallen/19e03c4717a2ef3ee6210a01c2c7de7f to your computer and use it in GitHub Desktop.
Save tomrallen/19e03c4717a2ef3ee6210a01c2c7de7f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Shlomo Hassid renamed this gist Jun 3, 2015. 1 changed file with 0 additions and 0 deletions.
    0 Bootstrap 3 only modals → Bootstrap 3 only modals.html
    View file
    File renamed without changes.
  2. Shlomo Hassid revised this gist May 27, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Bootstrap 3 only modals
    View file
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    }
    .modal-open .modal {
    .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    }
  3. Shlomo Hassid created this gist May 27, 2015.
    993 changes: 993 additions & 0 deletions Bootstrap 3 only modals
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,993 @@
    <!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">&times;</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>