Bootstrap 3 modal - slideIn bottom and stick

Question

I am trying to make a small modal that could slide in the lower right corner and stay there. The modal should not affect the scrolling of the body (right now, when the modal mode is running, you can scroll only the modal, not the body).

My jsfiddle

I tried this:

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

But the modal is tied to the upper left edge. I want the bottom right. Any help would be great!

Edit: Sorry, this means the right side, not the left.

Answer 1

You can do this with the following changes:

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

Answer 2

Change your CSS code and do the following:

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

Answer 3

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