title: Can we use bootstrap modal by extracting javascript and css needed for modal and keeping it locally in our code?
body: <p>I am new to front end development and I have a requirement of using bootstrap modal.</p>
  
  <p>I tried copying the bootstrap css and js code for modal and kept in my css file and kept the javascript in script tag and tried using the modal. But I am not getting the pop up on clicking button. CSS is getting applied but js part is not working. </p>
  
  <p>Am I missing anything here? </p>
  
  <p>This is bootstrap modal js code -</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  'use strict';
  
  // MODAL CLASS DEFINITION
  // ======================
  
  var Modal = function (element, options) {
  this.options   = options
  this.$element  = $(element)
  this.$backdrop =
  this.isShown   = null
  
  if (this.options.remote) {
  this.$element
  .find('.modal-content')
  .load(this.options.remote, $.proxy(function () {
  this.$element.trigger('loaded.bs.modal')
  }, this))
  }
  }
  
  Modal.DEFAULTS = {
  backdrop: true,
  keyboard: true,
  show: true
  }
  
  Modal.prototype.toggle = function (_relatedTarget) {
  return this[!this.isShown ? 'show' : 'hide'](_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.escape()
  
  this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
  
  this.backdrop(function () {
  var transition = $.support.transition &amp;&amp; that.$element.hasClass('fade')
  
  if (!that.$element.parent().length) {
  that.$element.appendTo(document.body) // don't move modals dom position
  }
  
  that.$element
  .show()
  .scrollTop(0)
  
  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.$element.find('.modal-dialog') // wait for modal to slide in
  .one($.support.transition.end, function () {
  that.$element.focus().trigger(e)
  })
  .emulateTransitionEnd(300) :
  that.$element.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()
  
  $(document).off('focusin.bs.modal')
  
  this.$element
  .removeClass('in')
  .attr('aria-hidden', true)
  .off('click.dismiss.bs.modal')
  
  $.support.transition &amp;&amp; this.$element.hasClass('fade') ?
  this.$element
  .one($.support.transition.end, $.proxy(this.hideModal, this))
  .emulateTransitionEnd(300) :
  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 &amp;&amp; !this.$element.has(e.target).length) {
  this.$element.focus()
  }
  }, this))
  }
  
  Modal.prototype.escape = function () {
  if (this.isShown &amp;&amp; this.options.keyboard) {
  this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
  e.which === 27 &amp;&amp; this.hide()
  }, this))
  } else if (!this.isShown) {
  this.$element.off('keyup.dismiss.bs.modal')
  }
  }
  
  Modal.prototype.hideModal = function () {
  var that = this
  this.$element.hide()
  this.backdrop(function () {
  that.removeBackdrop()
  that.$element.trigger('hidden.bs.modal')
  })
  }
  
  Modal.prototype.removeBackdrop = function () {
  this.$backdrop &amp;&amp; this.$backdrop.remove()
  this.$backdrop = null
  }
  
  Modal.prototype.backdrop = function (callback) {
  var animate = this.$element.hasClass('fade') ? 'fade' : ''
  
  if (this.isShown &amp;&amp; this.options.backdrop) {
  var doAnimate = $.support.transition &amp;&amp; animate
  
  this.$backdrop = $('&lt;div class="modal-backdrop ' + animate + '" /&gt;')
  .appendTo(document.body)
  
  this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
  if (e.target !== e.currentTarget) {return}
  this.options.backdrop === 'static' ? this.$element[0].focus.call(this.$element[0]) : this.hide.call(this)
  }, this))
  
  if (doAnimate) {this.$backdrop[0].offsetWidth} // force reflow
  
  this.$backdrop.addClass('in')
  
  if (!callback) { return }
  
  doAnimate ?
  this.$backdrop
  .one($.support.transition.end, callback)
  .emulateTransitionEnd(150) :
  callback()
  
  } else if (!this.isShown &amp;&amp; this.$backdrop) {
  this.$backdrop.removeClass('in')
  
  $.support.transition &amp;&amp; this.$element.hasClass('fade') ?
  this.$backdrop
  .one($.support.transition.end, callback)
  .emulateTransitionEnd(150) :
  callback()
  
  } else if (callback) {
  callback()
  }
  }
  
  
  // MODAL PLUGIN DEFINITION
  // =======================
  
  var old = $.fn.modal
  
  $.fn.modal = function (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' &amp;&amp; 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) }
  })
  }
  
  $.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 &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
  var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) &amp;&amp; href }, $target.data(), $this.data())
  
  if ($this.is('a')) { e.preventDefault() }
  
  $target
  .modal(option, this)
  .one('hide', function () {
  $this.is(':visible') &amp;&amp; $this.focus()
  })
  })
  
  $(document)
  .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is how I am invoking the modal </p>
  
  <pre><code> &lt;button type="button" class="btn" data-toggle="modal" data-target="#myModal"&gt;
          Open modal
          &lt;/button&gt;
  
          &lt;!-- The Modal --&gt;
              &lt;div class="modal" id="myModal"&gt;
                  &lt;div class="modal-dialog"&gt;
                      &lt;div class="modal-content"&gt;
  
                  &lt;!-- Modal Header --&gt;
                           &lt;div class="modal-header"&gt;
                              &lt;h4 class="modal-title"&gt;Modal Heading&lt;/h4&gt;
                              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                          &lt;/div&gt;
  
                      &lt;!-- Modal body --&gt;
                          &lt;div class="modal-body"&gt;
                              Modal body..
                          &lt;/div&gt;
  
                      &lt;!-- Modal footer --&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>