2012-02-24 5 views
1

これは私の状況です。twitter bootsrap先読みモードを上に持ち込む

どうすればこの問題を解決できますか?

enter image description here

broswer.css はremove-しようとしたが、私はmodal.jsの2つのバージョンがあり、何も

を変更しない 先行入力がモーダルの下にある新しいもの

/* ========================================================= 
* 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 && that.$element.hasClass('fade') 

      !that.$element.parent().length && 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 && 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 && 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 && this.options.backdrop) { 
     var doAnimate = $.support.transition && animate 

     this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') 
     .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 && this.$backdrop) { 
     this.$backdrop.removeClass('in') 

     $.support.transition && 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 && this.options.keyboard) { 
     $(document).on('keyup.dismiss.modal', function (e) { 
     e.which == 27 && 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' && 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')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 
     , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data()) 

     e.preventDefault() 
     $target.modal(option) 
    }) 
    }) 

}(window.jQuery); 

旧版、先行入力は先頭にありますモーダルは ですが、すべてのモーダルはロード時に開きます。

/* ========================================================= 
* 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 && 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 && e.preventDefault() 

     if (!this.isShown) { 
      return this 
     } 

     var that = this 
     this.isShown = false 

     escape.call(this) 

     this.$element 
      .trigger('hide') 
      .removeClass('in') 

     $.support.transition && 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 && this.settings.backdrop) { 
      var doAnimate = $.support.transition && animate 

      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') 
     .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 && this.$backdrop) { 
      this.$backdrop.removeClass('in') 

      $.support.transition && 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 && 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); 
+0

奇数[モーダルダイアログスタイル](https://github.com/twitter/bootstrap/blob/master/less/modals.less)はモーダル内のポップオーバーやドロップダウンを考慮しているようですので、可能な限り動作するはずですtell – Flambino

+0

一見するためにいくつかのコードを投稿できますか?おそらくあなたのhtml? –

+0

私はbootsrap-xtraサイトからmodal.jsを使ってbtwを追加しました。私はtypeahead.jsを撮ったサイトから同じjsと交換するのに飽きたが、状況が最悪になってしまった。 –

答えて

0

modal.jsの2番目のバージョンが使用されていました。

0

モーダルのz屈折率である< 1050 .dropdownメニューのzインデックスを設定します。

関連する問題