“CenterVertical”属性不会将模态引导框定位在屏幕中央

问题描述

需要将模态引导框窗口垂直居中在屏幕中央，但“centerVertical”属性不符合要求。有大佬知道怎么解决吗？

谢谢:)

bootBox.dialog({
    message: "I am a custom dialog",title: "Custom title",//size: "large",//centerVertical: true,//backdrop: true,centerVertical: true,size: "small",buttons: {
        success: {
            label: "Success!",className: "btn-success",callback: function callback() {
                toastr.info("great success");
                alert('ok')
            }
        },danger: {
            label: "Danger!",className: "btn-danger",callback: function callback() {
                toastr.info("uh oh,look out!");
            }
        },main: {
            label: "Click ME!",className: "btn-primary",callback: function callback() {
                toastr.info("Primary button");
            }
        }
    }
});

解决方法

centerVertical 选项未在 4.x 分支中实现。您需要自己更新 Bootbox 或添加 Bootstrap 类 modal-dialog-centered。

在 4.x 分支中有几种方法可以实现这一点。这可能是最简单的方法：

inline fun <reified T : ViewModel> Fragment.getViewModel(crossinline provider: (handle: SavedStateHandle) -> T) =
  viewModels<T> {
    object : AbstractSavedStateViewModelFactory(this,arguments) {
      override fun <T : ViewModel?> create(
        key: String,modelClass: Class<T>,handle: SavedStateHandle
      ) = provider(handle) as T
    }
  }

jsFiddle：https://jsfiddle.net/3y26gpw9/1/

如果您希望所有模态都居中，您可以随时调整源以将相关类附加到模板，此处：https://github.com/makeusabrew/bootbox/blob/v4.x/bootbox.js#L39。

bootbox bootstrap-4