CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Tomas Jacobsen
Tomas Jacobsen

Reputation: 2416

Bootstrap 3 modal - slideIn from bottom and stick

Im trying to make a small modal that could slide in from the bottom right, and stay there. The modal should not have any effect on the scroll of body (right now, when a modal is launched, it is only possible to scroll the modal, and not the body)

My jsfiddle

I have 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 stuck to the top left. I want bottom right. Any help would be great!

Edit: Sorry, meant right side, not left.

Upvotes: 4

Views: 1231

Answers (3)

Abraham Sankutty
Abraham Sankutty

Reputation: 105

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

Upvotes: 0

Parkash Kumar
Parkash Kumar

Reputation: 4730

You can do this with 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

Upvotes: 1

George Vasilopoulos
George Vasilopoulos

Reputation: 83

Change your CSS code and do this:

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

Upvotes: 0

Related Questions