更改 Bootstrap 的默认模式 Class

Changing Bootstrap's Default Modal Class

我需要更改 Bootstrap 的 Javascript 和 CSS 文件,以便更改应用于包含 [=38= 的主文件的 class 名称] 对于模态。

这是默认容器:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

下面是我想要更改的方式:

<div class="MY-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

我已经尝试 运行 通过 modal.js 和 modal.less 文件并将对“.modal”的所有引用更改为“.MY-modal”,但我收到以下错误在控制台中:Uncaught ReferenceError: Invalid left-hand side in assignment.

任何人都可以深入了解我需要在 JS 文件中更改哪些行才能使这项工作正常进行吗?

我需要更改它的原因是我正在将 Bootstrap 实施到已经使用 class .modal 的内部 CMS因为它有自己的模式,这会导致与 Bootstrap.

冲突

我所做的是,为基础 .modal 创建修饰符 class(例如 .modal--custom

如果你使用 sass 就这么简单:

$modal-name: 'modal';

.#{$modal-name} {
    &--custom {
        .#{$modal-name}-dialog {
            // some custom styling
        }
        .#{$modal-name}-footer {
            // some custom styling
        }
        .#{$modal-name}-body {
            // some custom styling
        }

    }
}

然后你应用两个

<div class="modal modal--custom"></div>

模态背景有点问题。我对此使用了一些变通方法,基本上是在调用 .show() 方法后立即添加自定义 class:

(function ($) {
    'use strict';

    const backdropClassName = 'modal-backdrop--custom';

    $(() => {
        $('body').on('show.bs.modal', '.modal', () => {
            setTimeout(() => {
                const $modalBackdrop = $('.modal-backdrop');
                if ($modalBackdrop.length > 0 && !$modalBackdrop.hasClass(backdropClassName)) {
                    $modalBackdrop.addClass(backdropClassName);
                }
            });
        });
    });

})(jQuery);