twitter-bootstrap jQuery 动态添加 CSS 类到 bootbox 模态

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25089098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:15:22  来源:igfitidea点击:

jQuery add CSS Class to bootbox Modal Dynamically

javascriptjquerycsstwitter-bootstrapbootbox

提问by SBB

I am using the jQuery plugin called Bootboxjs for my modals.

我正在为我的模态使用名为 Bootboxjs 的 jQuery 插件。

This is how I run the code:

这是我运行代码的方式:

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
});

I am making a plugin for a project and I don't want this to affect existing modal styles but I need to make this specific modal scrollable when the content reaches the max height.

我正在为一个项目制作一个插件,我不希望这影响现有的模态样式,但是当内容达到最大高度时,我需要使这个特定的模态可滚动。

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

How could I apply the above CSS to just this bootboxmodal?

我怎样才能将上面的 CSS 应用到这个bootbox模态?

采纳答案by Xm7X

You can try this

你可以试试这个

.bootbox-dialog .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Check out these examples

看看这些例子

http://bootboxjs.com/examples.html

http://bootboxjs.com/examples.html

Inspect the modals on the examples they each have a custom class. In the first example class bootbox-alert. In the second example class bootbox-confirm.

检查示例上的模态,它们每个都有一个自定义类。在第一个示例类 bootbox-alert 中。在第二个示例类 bootbox-confirm 中。

If your code follows the examples. Your code should have a class called bootbox-dialog on the modal.

如果您的代码遵循示例。您的代码应该在模态上有一个名为 bootbox-dialog 的类。

The bootbox docs show you can add a custom class name.

bootbox 文档显示您可以添加自定义类名。

http://bootboxjs.com/documentation.html

http://bootboxjs.com/documentation.html

This is a good write up on how the css selectors work.

这是一篇关于 css 选择器如何工作的好文章。

http://css-tricks.com/how-css-selectors-work/

http://css-tricks.com/how-css-selectors-work/

回答by JerryGoyal

I would suggest you to add class only to your modal that'll have all the required styles. You can do this way:

我建议您仅将类添加到具有所有必需样式的模态中。你可以这样做:

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
}).addClass('bootboxDanger');


.bootboxDanger{
    max-height: 420px;
    overflow-y: auto;
}