Question

我的问题是，如果我必须将背景用于其他目的，我可以使用bootstrap的模态插件的背景作为单独的独立组件。如果可能，那么如何使用它。提前致谢

Answer 1

您不能将引导程序背景用作独立组件。

我编写了以下js函数，继承自bootstrap，用于使用背景。

该函数使用jquery，如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
    }

这是使用它的代码：

      function showBackdrop() {

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

在两个函数中显示和隐藏你有一个回调来执行自定义操作，就像bootstrap一样。

请注意。您必须设置show callback功能才能生成背景幕。对于隐藏功能，它不是必需的。

我们可以使用bootstrap模态背景作为独立组件

1 个答案: