Можем ли мы использовать модальный фон bootstrap как автономный компонент

Question

Мой вопрос в том, что я могу использовать внешний вид загрузочного модального плагина как отдельный автономный компонент, если мне нужно использовать задний фон для каких-то других целей. Если возможно, то как его использовать. Заранее благодарен

Answer 1

Вы не можете использовать фон загрузочного лотка в качестве отдельного компонента.

Я написал следующую функцию js, унаследованную от бутстрапа, для использования фона.

Функция jQuery как бутстрап.

var backdrop = function() { 
     var that = this 
     var animate = 'fade' 
     that.$body = $(document.body) 
     that.__TRANSITION_DURATION = 300 
     that.__BACKDROP_TRANSITION_DURATION = 150 

     this.show = function (callback) { 
      var doAnimate = $.support.transition && animate 

      that.$backdrop = $(document.createElement('div')) 
       .addClass('modal-backdrop ' + animate) 
       .appendTo(that.$body) 

      if (doAnimate) that.$backdrop[0].offsetWidth // force reflow 

      that.$backdrop.addClass('in') 

      if (!callback) return 

      doAnimate ? 
       that.$backdrop 
       .one('bsTransitionEnd', callback) 
       .emulateTransitionEnd(that.__BACKDROP_TRANSITION_DURATION) : 
       callback() 
     } 

     this.hide = function (callback) { 

      if (that.$backdrop) { 
       var callbackRemove = function() { 
        that.$backdrop && that.$backdrop.remove() 
        that.$backdrop = null 
        callback && callback() 
       } 

       $.support.transition ? 
        that.$backdrop 
        .one('bsTransitionEnd', callbackRemove) 
        .emulateTransitionEnd(that.__BACKDROP_TRANSITION_DURATION) : 
        callbackRemove() 
      } 
     } 

     return this 
    } 

и это код для его использования:

 function showBackdrop() { 

      var bd = new backdrop() 
      bd.show(function() { }) 
      setTimeout(function() { bd.hide() }, 2000) 
     } 

в обе функции отображения и скрытия вас есть обратный вызов для ведения пользовательских действий, так же, как бутстрапе.

Примечание. Вы должны установить функцию обратного вызова show для эффекта. Для скрытой функции это не требуется.