title: bringing twitter bootsrap typeahead above modal
body: <p>This is my situation,</p>
  
  <p>how can I fix this?</p>
  
  <p><img src="https://i.stack.imgur.com/YoQ59.png" alt="enter image description here"></p>
  
  <p><strong>broswer.css</strong>
  tried to remove- but changed nothing</p>
  
  <p><strong>I have two versions of modal.js
  new one where typeahead is below the modal</strong></p>
  
  <pre><code>/* =========================================================
   * bootstrap-modal.js v2.0.1
   * http://twitter.github.com/bootstrap/javascript.html#modals
   * =========================================================
   * Copyright 2012 Twitter, Inc.
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   * http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   * ========================================================= */
  
  
  !function( $ ){
  
    "use strict"
  
   /* MODAL CLASS DEFINITION
    * ====================== */
  
    var Modal = function ( content, options ) {
      this.options = options
      this.$element = $(content)
        .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    }
  
    Modal.prototype = {
  
        constructor: Modal
  
      , toggle: function () {
          return this[!this.isShown ? 'show' : 'hide']()
        }
  
      , show: function () {
          var that = this
  
          if (this.isShown) return
  
          $('body').addClass('modal-open')
  
          this.isShown = true
          this.$element.trigger('show')
  
          escape.call(this)
          backdrop.call(this, function () {
            var transition = $.support.transition &amp;&amp; that.$element.hasClass('fade')
  
            !that.$element.parent().length &amp;&amp; that.$element.appendTo(document.body) //don't move modals dom position
  
            that.$element
              .show()
  
            if (transition) {
              that.$element[0].offsetWidth // force reflow
            }
  
            that.$element.addClass('in')
  
            transition ?
              that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
              that.$element.trigger('shown')
  
          })
        }
  
      , hide: function ( e ) {
          e &amp;&amp; e.preventDefault()
  
          if (!this.isShown) return
  
          var that = this
          this.isShown = false
  
          $('body').removeClass('modal-open')
  
          escape.call(this)
  
          this.$element
            .trigger('hide')
            .removeClass('in')
  
          $.support.transition &amp;&amp; this.$element.hasClass('fade') ?
            hideWithTransition.call(this) :
            hideModal.call(this)
        }
  
    }
  
  
   /* MODAL PRIVATE METHODS
    * ===================== */
  
    function hideWithTransition() {
      var that = this
        , timeout = setTimeout(function () {
            that.$element.off($.support.transition.end)
            hideModal.call(that)
          }, 500)
  
      this.$element.one($.support.transition.end, function () {
        clearTimeout(timeout)
        hideModal.call(that)
      })
    }
  
    function hideModal( that ) {
      this.$element
        .hide()
        .trigger('hidden')
  
      backdrop.call(this)
    }
  
    function backdrop( callback ) {
      var that = this
        , 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)
  
        if (this.options.backdrop != 'static') {
          this.$backdrop.click($.proxy(this.hide, this))
        }
  
        if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
  
        this.$backdrop.addClass('in')
  
        doAnimate ?
          this.$backdrop.one($.support.transition.end, callback) :
          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, $.proxy(removeBackdrop, this)) :
          removeBackdrop.call(this)
  
      } else if (callback) {
        callback()
      }
    }
  
    function removeBackdrop() {
      this.$backdrop.remove()
      this.$backdrop = null
    }
  
    function escape() {
      var that = this
      if (this.isShown &amp;&amp; this.options.keyboard) {
        $(document).on('keyup.dismiss.modal', function ( e ) {
          e.which == 27 &amp;&amp; that.hide()
        })
      } else if (!this.isShown) {
        $(document).off('keyup.dismiss.modal')
      }
    }
  
  
   /* MODAL PLUGIN DEFINITION
    * ======================= */
  
    $.fn.modal = function ( option ) {
      return this.each(function () {
        var $this = $(this)
          , data = $this.data('modal')
          , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' &amp;&amp; option)
        if (!data) $this.data('modal', (data = new Modal(this, options)))
        if (typeof option == 'string') data[option]()
        else if (options.show) data.show()
      })
    }
  
    $.fn.modal.defaults = {
        backdrop: true
      , keyboard: true
      , show: true
    }
  
    $.fn.modal.Constructor = Modal
  
  
   /* MODAL DATA-API
    * ============== */
  
    $(function () {
      $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
        var $this = $(this), href
          , $target = $($this.attr('data-target') || (href = $this.attr('href')) &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
          , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
  
        e.preventDefault()
        $target.modal(option)
      })
    })
  
  }( window.jQuery );
  </code></pre>
  
  <p><strong>the old version, where typeahead is on top of the modal
  but all the modals are opened on load.</strong></p>
  
  <pre><code>/* =========================================================
  * bootstrap-modal.js v1.4.0
  * http://twitter.github.com/bootstrap/javascript.html#modal
  * =========================================================
  * Copyright 2011 Twitter, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * ========================================================= */
  
  
  !function ($) {
  
      "use strict"
  
      /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
      * ======================================================= */
  
      var transitionEnd
  
      $(document).ready(function () {
  
          $.support.transition = (function () {
              var thisBody = document.body || document.documentElement
          , thisStyle = thisBody.style
          , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
              return support
          })()
  
          // set CSS transition event type
          if ($.support.transition) {
              transitionEnd = "TransitionEnd"
              if ($.browser.webkit) {
                  transitionEnd = "webkitTransitionEnd"
              } else if ($.browser.mozilla) {
                  transitionEnd = "transitionend"
              } else if ($.browser.opera) {
                  transitionEnd = "oTransitionEnd"
              }
          }
  
      })
  
  
      /* MODAL PUBLIC CLASS DEFINITION
      * ============================= */
  
      var Modal = function (content, options) {
          this.settings = $.extend({}, $.fn.modal.defaults, options)
          this.$element = $(content)
        .delegate('.close', 'click.modal', $.proxy(this.hide, this))
  
          if (this.settings.show) {
              this.show()
          }
  
          return this
      }
  
      Modal.prototype = {
  
          toggle: function () {
              return this[!this.isShown ? 'show' : 'hide']()
          }
  
      , show: function () {
          var that = this
          this.isShown = true
          this.$element.trigger('show')
  
          escape.call(this)
          backdrop.call(this, function () {
              var transition = $.support.transition &amp;&amp; that.$element.hasClass('fade')
  
              that.$element
              .appendTo(document.body)
              .show()
  
              if (transition) {
                  that.$element[0].offsetWidth // force reflow
              }
  
              that.$element.addClass('in')
  
              transition ?
              that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
              that.$element.trigger('shown')
  
          })
  
          return this
      }
  
      , hide: function (e) {
          e &amp;&amp; e.preventDefault()
  
          if (!this.isShown) {
              return this
          }
  
          var that = this
          this.isShown = false
  
          escape.call(this)
  
          this.$element
            .trigger('hide')
            .removeClass('in')
  
          $.support.transition &amp;&amp; this.$element.hasClass('fade') ?
            hideWithTransition.call(this) :
            hideModal.call(this)
  
          return this
      }
  
      }
  
  
      /* MODAL PRIVATE METHODS
      * ===================== */
  
      function hideWithTransition() {
          // firefox drops transitionEnd events :{o
          var that = this
        , timeout = setTimeout(function () {
            that.$element.unbind(transitionEnd)
            hideModal.call(that)
        }, 500)
  
          this.$element.one(transitionEnd, function () {
              clearTimeout(timeout)
              hideModal.call(that)
          })
      }
  
      function hideModal(that) {
          this.$element
        .hide()
        .trigger('hidden')
  
          backdrop.call(this)
      }
  
      function backdrop(callback) {
          var that = this
        , animate = this.$element.hasClass('fade') ? 'fade' : ''
          if (this.isShown &amp;&amp; this.settings.backdrop) {
              var doAnimate = $.support.transition &amp;&amp; animate
  
              this.$backdrop = $('&lt;div class="modal-backdrop ' + animate + '" /&gt;')
          .appendTo(document.body)
  
              if (this.settings.backdrop != 'static') {
                  this.$backdrop.click($.proxy(this.hide, this))
              }
  
              if (doAnimate) {
                  this.$backdrop[0].offsetWidth // force reflow
              }
  
              this.$backdrop.addClass('in')
  
              doAnimate ?
          this.$backdrop.one(transitionEnd, callback) :
          callback()
  
          } else if (!this.isShown &amp;&amp; this.$backdrop) {
              this.$backdrop.removeClass('in')
  
              $.support.transition &amp;&amp; this.$element.hasClass('fade') ?
          this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :
          removeBackdrop.call(this)
  
          } else if (callback) {
              callback()
          }
      }
  
      function removeBackdrop() {
          this.$backdrop.remove()
          this.$backdrop = null
      }
  
      function escape() {
          var that = this
          if (this.isShown &amp;&amp; this.settings.keyboard) {
              $(document).bind('keyup.modal', function (e) {
                  if (e.which == 27) {
                      that.hide()
                  }
              })
          } else if (!this.isShown) {
              $(document).unbind('keyup.modal')
          }
      }
  
  
      /* MODAL PLUGIN DEFINITION
      * ======================= */
  
      $.fn.modal = function (options) {
          var modal = this.data('modal')
  
          if (!modal) {
  
              if (typeof options == 'string') {
                  options = {
                      show: /show|toggle/.test(options)
                  }
              }
  
              return this.each(function () {
                  $(this).data('modal', new Modal(this, options))
              })
          }
  
          if (options === true) {
              return modal
          }
  
          if (typeof options == 'string') {
              modal[options]()
          } else if (modal) {
              modal.toggle()
          }
  
          return this
      }
  
      $.fn.modal.Modal = Modal
  
      $.fn.modal.defaults = {
          backdrop: false
    , keyboard: false
    , show: false
      }
  
  
      /* MODAL DATA- IMPLEMENTATION
      * ========================== */
  
      $(document).ready(function () {
          $('body').delegate('[data-controls-modal]', 'click', function (e) {
              e.preventDefault()
              var $this = $(this).data('show', true)
              $('#' + $this.attr('data-controls-modal')).modal($this.data())
          })
      })
  
  } (window.jQuery || window.ender);
  </code></pre>