Bootstrap 3模式-从底部滑入并粘牢

Bootstrap 3 modal - slideIn from bottom and stick

本文关键字：底部 模式 Bootstrap      更新时间：2023-09-26

我正在尝试制作一个小模态，它可以从右下角滑入并保持不变。模态不应该对机身的滚动有任何影响（现在，当模态启动时，只能滚动模态，而不能滚动机身）

我的jsfiddle

我试过这个：

.modal-slidein .modal-dialog {
  margin: 0 10px 0 0;
}
.modal-slidein .modal-header {
  border: none;
}
.modal-slidein .modal-content {
  background-color: #68cae2;
  border: none;
  border-radius: 0px;
  outline: 0;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

但是模态被固定在左上角。我想要右下角。任何帮助都会很棒！

编辑：对不起，指的是右边，而不是左边

您可以通过以下更改来做到这一点：

/* set modal to right-bottom */
.modal-slidein {
    top: auto;
    left: auto;
    padding-right: 0px !important;
}
/* enable back scroll-bar */
.modal-open {
  overflow: auto !important;
}

DEMO

更改CSS代码并执行以下操作：

.modal-slidein .modal-dialog {
    margin: 0 0 0 0;
    position:absolute;
    bottom:0;
    left:0;
}

.modal-dialog.modal-sm {
    position: ABSOLUTE;
    right: 0;
    bottom: 0;
    width: 50%;
}
相关文章：