Bootstrap 3模态 - 从底部滑动并粘住

时间:2015-12-18 10:02:34

标签: javascript jquery css twitter-bootstrap

我试图制作一个可以从右下方滑入的小模态,然后留在那里。模态不应该对身体的滚动产生任何影响(现在,当一个模态被启动时,它只能滚动模态而不是身体)

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

但是模态停留在左上角。我想要右下角。任何帮助都会很棒!

编辑:抱歉,意思是右侧,而不是左侧。

3 个答案:

答案 0 :(得分:1)

您可以执行以下更改:

/* 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

答案 1 :(得分:0)

更改您的CSS代码并执行此操作:

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

答案 2 :(得分:0)

.modal-dialog.modal-sm {
    position: ABSOLUTE;
    right: 0;
    bottom: 0;
    width: 50%;
}