Können wir Bootstrap modalen Hintergrund als eigenständige Komponente verwenden

Question

meine Frage ist, dass ich Bootstrap modalen Plugin Hintergrund als separate eigenständige Komponente verwenden kann, wenn ich Hintergrund für einen anderen Zweck verwenden muss. Wenn möglich dann, wie man es benutzt. Vielen Dank im Voraus

Answer 1

Sie können den Bootstrap-Hintergrund nicht als eigenständige Komponente verwenden.

Ich habe die folgende js-Funktion geschrieben, geerbt von Bootstrap, für die Verwendung von Hintergrund.

Die Funktion verwenden jquery wie Bootstrap.

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 
    } 

und dies ist der Code, um es für die Anwendung:

 function showBackdrop() { 

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

in beiden Funktionen ein- und ausblenden Sie haben einen Rückruf für benutzerdefinierte Aktionen zu tun, genau wie Bootstrap.

Hinweis. Sie müssen die Show-Callback-Funktion für den Hintergrund-Effekt einstellen. Für die Versteckfunktion ist es nicht erforderlich.