jQuery는 CSS 클래스를 부트 박스 모달에 동적으로 추가합니다

Question

내 모달에 대한 Bootboxjs라는 jQuery 플러그인을 사용하고 있습니다.

이 코드를 실행하는 방법입니다.

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>'
});

.

프로젝트를 위해 플러그인을 만들고 있으며, 기존의 모달 스타일에 영향을주지 않으려는 것은 아니지만 콘텐츠가 최대 높이에 도달 할 때이 특정 모달 스크롤 할 수 있습니다.

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

.

위의 CSS를 어떻게이 CSS를 적용 할 수 있습니까?

Answer 1

이 작업을 시도 할 수 있습니다

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

.

이 예제를 확인하십시오

http://bootboxjs.com/examples.html

사용자 정의 클래스가있는 예에서 모달을 검사하십시오.첫 번째 예제 BootBox-Alert.두 번째 예제 BootBox - 확인.

코드가 예제를 따르는 경우

. 코드에는 모달의 BootBox-Dialog라는 클래스가 있어야합니다.

Bootbox 문서는 사용자 정의 클래스 이름을 추가 할 수 있습니다.

http://bootboxjs.com/documentation.html

CSS 선택기가 작동하는 방법에 대해 좋은 쓰는 것이 좋습니다.

http://csss-tricks.com/how-cssssselectors-work./

Answer 2

필자가 필요한 모든 스타일이있는 모달에만 클래스를 추가 할 것을 제안합니다. 이런 식으로 할 수 있습니다 :

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;
}

.