Конечно дальнейшие обработки через API не выкладываем, а вот плашкой- пользуйтесь, кому пригодится. Пользоваться ею можно не только modx.
HTML:
<div class="JSwidgetContainer">
<div class="JSwCicon"></div>
<div class="JSwCtext"><a href="#badnews" rel="fancybn">Отправьте нам сообщение</a></div>
<div class="JSwCcircle"></div>
<div style="display:none;"><div id="badnews"><h4 style="text-align:center;">К сожалению, данная опция доступна только при оплаченном доступе.</h4></div></div>
</div>
<script>
$(function(){
$("a[rel=fancybn]").fancybox();
});
</script>
Стили:
<style>
.JSwidgetContainer {
background: #383345 none repeat scroll 0 0;
bottom: 0;
box-shadow: 0 12px 25px 8px rgba(0, 0, 0, 0.17);
color: #f1f1f1;
font-family: arial;
font-size: 14px;
height: 38px;
position: fixed;
right: 30px;
width: 359px;
border-radius: 4px 28px 0 0;
overflow: hidden;
}
.JSwidgetContainer a{
color:#fff;
border:0;
}
.JSwCicon {
float: left;
height: 38px;
width: 49px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width=\'17\' height=\'12\' viewBox=\'0 0 17 12\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11.005 6.62l5.37 4.833c-.18.09-.36.18-.628.18H1.253c-.18 0-.27 0-.448-.09l5.19-4.832 2.147 1.88c.09.09.27.178.358.178.18 0 .268-.09.358-.18l2.147-1.967zM16.463.18c-.18-.09-.447-.18-.626-.18H1.253C.895 0 .626.09.447.268L8.5 7.516 16.463.18zM11.81 5.904L17 10.558V1.073l-5.19 4.832zM0 1.342v9.126c0 .09 0 .18.09.27l5.19-4.743L0 1.342z\' fill=\'%23FFF\' fill-rule=\'evenodd\'/%3E%3C/svg%3E");
background-position: 50% center;
background-repeat: no-repeat;
}
.JSwCtext {
padding: 9px 0;
float:left;
}
.JSwCcircle {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAhCAQAAAC/rnlzAAAAnUlEQVR4AV3I1RFEUQwCUIpad+m/l6e/l4WwPmdCQsBlX1jzX1OqCrjqnyhw5PTG85DUtfUaw7A2vmqWX05ww80gSXgFq24HcRq4i6HAQUsd90aPvGrGlT5elQceRk8leORxrLHUwqonGz0CnnmeQhe8/mrTEeBlEoq3atMyuk5X4zNBRaqBt6lkY77NOisFOZPthlbf1wPznWWueQCi4hYOBNjpsQAAAABJRU5ErkJggg==");
border-bottom-left-radius: 92%;
border-top-right-radius: 30px;
float: right;
height: 40px;
margin-right: -17px;
margin-top: -4px;
width: 40px;
}
</style>
Подключить fancybox
<link href="assets/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="assets/fancybox/jquery.fancybox.js"></script>
Fancybox брать либо с оф.сайта, либо качайте архив: yadviga.ru/modx-articles/fancybox.tgz
Комментарии (0)