更改 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);
我需要更改 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);