{"id":5682,"date":"2014-04-05T04:21:40","date_gmt":"2014-04-05T04:21:40","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/04\/05\/bringing-twitter-bootsrap-typeahead-above-modal-collection-of-common-programming-errors\/"},"modified":"2014-04-05T04:21:40","modified_gmt":"2014-04-05T04:21:40","slug":"bringing-twitter-bootsrap-typeahead-above-modal-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/04\/05\/bringing-twitter-bootsrap-typeahead-above-modal-collection-of-common-programming-errors\/","title":{"rendered":"bringing twitter bootsrap typeahead above modal-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/e66bb815b52eb8f82eab2c06427db8ca?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nElad Benda<\/p>\n<p>This is my situation,<\/p>\n<p>how can I fix this?<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/YoQ59.png\" \/><\/p>\n<p><strong>broswer.css<\/strong> tried to remove- but changed nothing<\/p>\n<p><strong>I have two versions of modal.js new one where typeahead is below the modal<\/strong><\/p>\n<pre><code>\/* =========================================================\n * bootstrap-modal.js v2.0.1\n * http:\/\/twitter.github.com\/bootstrap\/javascript.html#modals\n * =========================================================\n * Copyright 2012 Twitter, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n * ========================================================= *\/\n\n\n!function( $ ){\n\n  \"use strict\"\n\n \/* MODAL CLASS DEFINITION\n  * ====================== *\/\n\n  var Modal = function ( content, options ) {\n    this.options = options\n    this.$element = $(content)\n      .delegate('[data-dismiss=\"modal\"]', 'click.dismiss.modal', $.proxy(this.hide, this))\n  }\n\n  Modal.prototype = {\n\n      constructor: Modal\n\n    , toggle: function () {\n        return this[!this.isShown ? 'show' : 'hide']()\n      }\n\n    , show: function () {\n        var that = this\n\n        if (this.isShown) return\n\n        $('body').addClass('modal-open')\n\n        this.isShown = true\n        this.$element.trigger('show')\n\n        escape.call(this)\n        backdrop.call(this, function () {\n          var transition = $.support.transition &amp;&amp; that.$element.hasClass('fade')\n\n          !that.$element.parent().length &amp;&amp; that.$element.appendTo(document.body) \/\/don't move modals dom position\n\n          that.$element\n            .show()\n\n          if (transition) {\n            that.$element[0].offsetWidth \/\/ force reflow\n          }\n\n          that.$element.addClass('in')\n\n          transition ?\n            that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :\n            that.$element.trigger('shown')\n\n        })\n      }\n\n    , hide: function ( e ) {\n        e &amp;&amp; e.preventDefault()\n\n        if (!this.isShown) return\n\n        var that = this\n        this.isShown = false\n\n        $('body').removeClass('modal-open')\n\n        escape.call(this)\n\n        this.$element\n          .trigger('hide')\n          .removeClass('in')\n\n        $.support.transition &amp;&amp; this.$element.hasClass('fade') ?\n          hideWithTransition.call(this) :\n          hideModal.call(this)\n      }\n\n  }\n\n\n \/* MODAL PRIVATE METHODS\n  * ===================== *\/\n\n  function hideWithTransition() {\n    var that = this\n      , timeout = setTimeout(function () {\n          that.$element.off($.support.transition.end)\n          hideModal.call(that)\n        }, 500)\n\n    this.$element.one($.support.transition.end, function () {\n      clearTimeout(timeout)\n      hideModal.call(that)\n    })\n  }\n\n  function hideModal( that ) {\n    this.$element\n      .hide()\n      .trigger('hidden')\n\n    backdrop.call(this)\n  }\n\n  function backdrop( callback ) {\n    var that = this\n      , animate = this.$element.hasClass('fade') ? 'fade' : ''\n\n    if (this.isShown &amp;&amp; this.options.backdrop) {\n      var doAnimate = $.support.transition &amp;&amp; animate\n\n      this.$backdrop = $('')\n        .appendTo(document.body)\n\n      if (this.options.backdrop != 'static') {\n        this.$backdrop.click($.proxy(this.hide, this))\n      }\n\n      if (doAnimate) this.$backdrop[0].offsetWidth \/\/ force reflow\n\n      this.$backdrop.addClass('in')\n\n      doAnimate ?\n        this.$backdrop.one($.support.transition.end, callback) :\n        callback()\n\n    } else if (!this.isShown &amp;&amp; this.$backdrop) {\n      this.$backdrop.removeClass('in')\n\n      $.support.transition &amp;&amp; this.$element.hasClass('fade')?\n        this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :\n        removeBackdrop.call(this)\n\n    } else if (callback) {\n      callback()\n    }\n  }\n\n  function removeBackdrop() {\n    this.$backdrop.remove()\n    this.$backdrop = null\n  }\n\n  function escape() {\n    var that = this\n    if (this.isShown &amp;&amp; this.options.keyboard) {\n      $(document).on('keyup.dismiss.modal', function ( e ) {\n        e.which == 27 &amp;&amp; that.hide()\n      })\n    } else if (!this.isShown) {\n      $(document).off('keyup.dismiss.modal')\n    }\n  }\n\n\n \/* MODAL PLUGIN DEFINITION\n  * ======================= *\/\n\n  $.fn.modal = function ( option ) {\n    return this.each(function () {\n      var $this = $(this)\n        , data = $this.data('modal')\n        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' &amp;&amp; option)\n      if (!data) $this.data('modal', (data = new Modal(this, options)))\n      if (typeof option == 'string') data[option]()\n      else if (options.show) data.show()\n    })\n  }\n\n  $.fn.modal.defaults = {\n      backdrop: true\n    , keyboard: true\n    , show: true\n  }\n\n  $.fn.modal.Constructor = Modal\n\n\n \/* MODAL DATA-API\n  * ============== *\/\n\n  $(function () {\n    $('body').on('click.modal.data-api', '[data-toggle=\"modal\"]', function ( e ) {\n      var $this = $(this), href\n        , $target = $($this.attr('data-target') || (href = $this.attr('href')) &amp;&amp; href.replace(\/.*(?=#[^\\s]+$)\/, '')) \/\/strip for ie7\n        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())\n\n      e.preventDefault()\n      $target.modal(option)\n    })\n  })\n\n}( window.jQuery );\n<\/code><\/pre>\n<p><strong>the old version, where typeahead is on top of the modal but all the modals are opened on load.<\/strong><\/p>\n<pre><code>\/* =========================================================\n* bootstrap-modal.js v1.4.0\n* http:\/\/twitter.github.com\/bootstrap\/javascript.html#modal\n* =========================================================\n* Copyright 2011 Twitter, Inc.\n*\n* Licensed under the Apache License, Version 2.0 (the \"License\");\n* you may not use this file except in compliance with the License.\n* You may obtain a copy of the License at\n*\n* http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing, software\n* distributed under the License is distributed on an \"AS IS\" BASIS,\n* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n* See the License for the specific language governing permissions and\n* limitations under the License.\n* ========================================================= *\/\n\n\n!function ($) {\n\n    \"use strict\"\n\n    \/* CSS TRANSITION SUPPORT (https:\/\/gist.github.com\/373874)\n    * ======================================================= *\/\n\n    var transitionEnd\n\n    $(document).ready(function () {\n\n        $.support.transition = (function () {\n            var thisBody = document.body || document.documentElement\n        , thisStyle = thisBody.style\n        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined\n            return support\n        })()\n\n        \/\/ set CSS transition event type\n        if ($.support.transition) {\n            transitionEnd = \"TransitionEnd\"\n            if ($.browser.webkit) {\n                transitionEnd = \"webkitTransitionEnd\"\n            } else if ($.browser.mozilla) {\n                transitionEnd = \"transitionend\"\n            } else if ($.browser.opera) {\n                transitionEnd = \"oTransitionEnd\"\n            }\n        }\n\n    })\n\n\n    \/* MODAL PUBLIC CLASS DEFINITION\n    * ============================= *\/\n\n    var Modal = function (content, options) {\n        this.settings = $.extend({}, $.fn.modal.defaults, options)\n        this.$element = $(content)\n      .delegate('.close', 'click.modal', $.proxy(this.hide, this))\n\n        if (this.settings.show) {\n            this.show()\n        }\n\n        return this\n    }\n\n    Modal.prototype = {\n\n        toggle: function () {\n            return this[!this.isShown ? 'show' : 'hide']()\n        }\n\n    , show: function () {\n        var that = this\n        this.isShown = true\n        this.$element.trigger('show')\n\n        escape.call(this)\n        backdrop.call(this, function () {\n            var transition = $.support.transition &amp;&amp; that.$element.hasClass('fade')\n\n            that.$element\n            .appendTo(document.body)\n            .show()\n\n            if (transition) {\n                that.$element[0].offsetWidth \/\/ force reflow\n            }\n\n            that.$element.addClass('in')\n\n            transition ?\n            that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :\n            that.$element.trigger('shown')\n\n        })\n\n        return this\n    }\n\n    , hide: function (e) {\n        e &amp;&amp; e.preventDefault()\n\n        if (!this.isShown) {\n            return this\n        }\n\n        var that = this\n        this.isShown = false\n\n        escape.call(this)\n\n        this.$element\n          .trigger('hide')\n          .removeClass('in')\n\n        $.support.transition &amp;&amp; this.$element.hasClass('fade') ?\n          hideWithTransition.call(this) :\n          hideModal.call(this)\n\n        return this\n    }\n\n    }\n\n\n    \/* MODAL PRIVATE METHODS\n    * ===================== *\/\n\n    function hideWithTransition() {\n        \/\/ firefox drops transitionEnd events :{o\n        var that = this\n      , timeout = setTimeout(function () {\n          that.$element.unbind(transitionEnd)\n          hideModal.call(that)\n      }, 500)\n\n        this.$element.one(transitionEnd, function () {\n            clearTimeout(timeout)\n            hideModal.call(that)\n        })\n    }\n\n    function hideModal(that) {\n        this.$element\n      .hide()\n      .trigger('hidden')\n\n        backdrop.call(this)\n    }\n\n    function backdrop(callback) {\n        var that = this\n      , animate = this.$element.hasClass('fade') ? 'fade' : ''\n        if (this.isShown &amp;&amp; this.settings.backdrop) {\n            var doAnimate = $.support.transition &amp;&amp; animate\n\n            this.$backdrop = $('')\n        .appendTo(document.body)\n\n            if (this.settings.backdrop != 'static') {\n                this.$backdrop.click($.proxy(this.hide, this))\n            }\n\n            if (doAnimate) {\n                this.$backdrop[0].offsetWidth \/\/ force reflow\n            }\n\n            this.$backdrop.addClass('in')\n\n            doAnimate ?\n        this.$backdrop.one(transitionEnd, callback) :\n        callback()\n\n        } else if (!this.isShown &amp;&amp; this.$backdrop) {\n            this.$backdrop.removeClass('in')\n\n            $.support.transition &amp;&amp; this.$element.hasClass('fade') ?\n        this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :\n        removeBackdrop.call(this)\n\n        } else if (callback) {\n            callback()\n        }\n    }\n\n    function removeBackdrop() {\n        this.$backdrop.remove()\n        this.$backdrop = null\n    }\n\n    function escape() {\n        var that = this\n        if (this.isShown &amp;&amp; this.settings.keyboard) {\n            $(document).bind('keyup.modal', function (e) {\n                if (e.which == 27) {\n                    that.hide()\n                }\n            })\n        } else if (!this.isShown) {\n            $(document).unbind('keyup.modal')\n        }\n    }\n\n\n    \/* MODAL PLUGIN DEFINITION\n    * ======================= *\/\n\n    $.fn.modal = function (options) {\n        var modal = this.data('modal')\n\n        if (!modal) {\n\n            if (typeof options == 'string') {\n                options = {\n                    show: \/show|toggle\/.test(options)\n                }\n            }\n\n            return this.each(function () {\n                $(this).data('modal', new Modal(this, options))\n            })\n        }\n\n        if (options === true) {\n            return modal\n        }\n\n        if (typeof options == 'string') {\n            modal[options]()\n        } else if (modal) {\n            modal.toggle()\n        }\n\n        return this\n    }\n\n    $.fn.modal.Modal = Modal\n\n    $.fn.modal.defaults = {\n        backdrop: false\n  , keyboard: false\n  , show: false\n    }\n\n\n    \/* MODAL DATA- IMPLEMENTATION\n    * ========================== *\/\n\n    $(document).ready(function () {\n        $('body').delegate('[data-controls-modal]', 'click', function (e) {\n            e.preventDefault()\n            var $this = $(this).data('show', true)\n            $('#' + $this.attr('data-controls-modal')).modal($this.data())\n        })\n    })\n\n} (window.jQuery || window.ender);\n<\/code><\/pre>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/e66bb815b52eb8f82eab2c06427db8ca?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nElad Benda<\/p>\n<p>Used the second version of modal.js and it worked.<\/p>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/746a625a9264a203a6ddf711e0c6b120?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nPickle<\/p>\n<p>Set the z-index of .dropdown-menu to &lt; 1050, which is the z-index of the modal.<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Elad Benda This is my situation, how can I fix this? broswer.css tried to remove- but changed nothing I have two versions of modal.js new one where typeahead is below the modal \/* ========================================================= * 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5682","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=5682"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5682\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=5682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=5682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=5682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}