Перерыл весь наверное интернет и не смог найти выезжающий снизу 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>