Question

我需要更改Bootstrap的Javascript和CSS文件，以便更改应用于主要包含模式的div的类名。

这是默认容器：

<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：分配中的左侧无效。

有没有人可以提供一些见解，确切地知道我需要在JS文件中更改哪些行才能使其工作？

我需要改变它的原因是，我正在将Bootstrap实现到已经使用类 .modal 的内部CMS中，因为它自己的模式，这会导致与Bootstrap冲突。 / p>

Answer 1

我做的是为基地.modal创建修饰符类（例如.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()方法后添加了一个自定义类：

(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);

更改Bootstrap的默认模态类

1 个答案: