1

Перерыл весь наверное интернет и не смог найти выезжающий снизу ajax на всю ширину экрана, при нажатии на ссылку в любом месте сайта. Поделитесь если у кого таком имеется.

На данный момент имею такой код, но выезжает сверху, а нужно чтобы снизу

.overlay:target {
 //display:block
}
.popup {
 bottom: :-100%;
 right:0;
 left:50%;
 font-size:14px;
 z-index:20;
 margin:0;
 width:85%;
 min-width:200px;
 max-width:400px;
 position:fixed;
 padding:15px;
 border:1px solid #383838;
 background:#fefefe;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 -ms-border-radius:4px;
 border-radius:4px;
 font:14px/18px 'Tahoma',Arial,sans-serif;
 -webkit-transform:translate(-50%,-500%);
 -ms-transform:translate(-50%,-500%);
 -o-transform:translate(-50%,-500%);
 transform:translate(-50%,-500%);
 -webkit-transition:-webkit-transform .6s ease-out;
 -moz-transition:-moz-transform .6s ease-out;
 -o-transition:-o-transform .6s ease-out;
 transition:transform .6s ease-out
}
.popup:target {
 -webkit-transform:translate(-50%,0);
 -ms-transform:translate(-50%,0);
 -o-transform:translate(-50%,0);
 transform:translate(-50%,0);
 bottom:15%
}
.close {
 top:-10px;
 right:-10px;
 width:23px;
 height:23px;
 position:absolute;
 padding:0;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 background-color:rgba(61,61,61,.8);
 text-align:center;
 text-decoration:none;
 font:13px/20px 'Tahoma',Arial,sans-serif;
 font-weight:700
}
.close:before {
 color:rgba(255,255,255,.9);
 content:"X";
 text-shadow:0 -1px rgba(0,0,0,.9);
 font-size:12px
}
.close:hover {
 background-color:rgba(252,20,0,.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 transform:rotate(360deg)
}
<a href="#win1" rel="nofollow">Ссылка вызова</a>
<div class="popup" id="win1">
<a rel="nofollow" class="close sf" href="#close"></a>
</div>

1 ответ 1

0

Обновите св-во transform, главное чтобы число положительным было:

.popup{
  -webkit-transform:translate(-50%,1500%);
  -ms-transform:translate(-50%,1500%);
  -o-transform:translate(-50%,1500%);
  transform:translate(-50%,1500%);
}
9
  • Отказывается работать jsfiddle.net/workman31/uoz62pdn Commented 2 нояб. 2017 в 6:03
  • Вроде бы как работает, только когда жмем на крестик, то как-то странно затухает выскакивая вверх jsfiddle.net/workman31/uoz62pdn/1 Commented 2 нояб. 2017 в 6:10
  • 1
    У св-ва bottom уберите лишнее двоеточие
    – DaemonHK
    Commented 2 нояб. 2017 в 6:57
  • Все префиксы, кроме -webkit нужно выпилить. Commented 3 нояб. 2017 в 8:58
  • @SashaOmelchenko Все префиксы тогда уж можно выпиливать
    – DaemonHK
    Commented 3 нояб. 2017 в 9:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.