juliya
10/18/2017 - 8:22 AM

bootstrap modal

<a href="#" class="btn btn-default home-btn" data-href="#request-call-popup" data-toggle="modal"
               data-target="#request-call-popup">Contact Us</a>
<a href="#" class="btn btn-default home-btn" data-href="#status-popup" data-toggle="modal"
       data-target="#status-popup">Contact Us</a>

<div id="request-call-popup" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                <span class="modal-close-item modal-close-item-1"></span>
                <span class="modal-close-item modal-close-item-2"></span>
            </button>

        </div>
    </div>
</div>

/*=MODAL=*/
.modal-backdrop {
    background-color: #ffffff;
    &.in {
        opacity: 0.70;
    }
}
.modal-dialog {
    margin-left: auto;
    margin-right: auto;
    .border-radius(23px);
    border: none;
    width: 98%;
    max-width: 460px;
    background-color: transparent;
    .box-shadow(0, 0, 15px, 0, rgba(0,0,0,0.2));
}
.modal-content {
    .border-radius(23px);
    border: none;
    background-color: #ffffff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    .border-radius(50%);
    width: 32px;
    height: 32px;
    background-color: #ededed;
    cursor: pointer;
    .transition();
    &:hover {
        background-color: #d9d9d9;
    }
    &-item {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        margin-top: -1px;
        margin-left: -6px;
        width: 12px;
        height: 2px;
        background-color: @accent-color;
        &-1 {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        &-2 {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
}

    //передача инфы во всплывашку отзыва
    reviewModal.on('show.bs.modal', function (e) {
        const modalContent = $(this).find('.js-modal-review');
        const reviewAuthor = $(e.relatedTarget).find('.js-review-author');
        const reviewContent = $(e.relatedTarget).find('.js-review-full');
        $(reviewAuthor).clone(true).appendTo(modalContent);
        $(reviewContent).clone(true).appendTo(modalContent).removeAttr('hidden');
    });
    reviewModal.on('hidden.bs.modal', function (e) {
        $('.js-modal-review').empty();
    });