Modal Popup Transition - Popup from Button?

Question

I have a question on a transition for a modal popup. The popup comes from a button. I'm currently using the css below, which isn't bad. But is there any way to make the transition look like the modal is popping up from the button I just pressed? FYI, i'm only intermdiate with css. Do I need some JS for this?

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:29

If you're up for a little jQuery, there's some good information here.

Basically, you want to capture the position of the button you click on and set the modal's position (or fade-start position, whichever one you're after) to that value.

I'm not sure if this can be done in CSS, but between JS and jQuery you can probably find a solution relatively easily. You can add an onClick listener to your button and capture the data you need that way.

Apparently, position:['middle',20], (taken directly from the link above!) is a pretty simple way to accomplish this - but again, this is jQuery, not CSS.

Modal Popup Transition - Popup from Button?

1 Answers1