Fizruk

Это не плагин, это самописное окно, в любом случае спасибо за совет.

Не сработало. Тут есть одна особенность. 

http://prntscr.com/idzg4a

вот белый полупрозрачный фон это блок который растянут на весь экран вот такими стилями

.call-back{

     position: foxed;

     top: 0;

     bottom: 0;

     left: 0;

     right: 0; 

}

возможно браузер понимает это как клик по этому блоку а не по body

я поменял запрос и все же не сработало 

$('.call-back').click(function() {

//$('.call-back').hide();

$(".hide").removeClass("call-back")

});

$('.hide>.wpcf7').click(function(event){

event.stopPropagation();

});

Как на Jquery написать команду в которой попап окно будет закрываться при клике и на крестик и на пустое место вне блока с формой?

Вот так выглядит форма обратно связи http://prntscr.com/idz5lf 

Вот так я закрываю её при нажатии на крестик, просто убираю класс в нужном блоке и все работает

$(".knopka2").click(function(){

$(".hide").addClass("call-back")

});

$(".close").click(function(){

$(".hide").removeClass("call-back")

});

Подскажите как должна выглядеть функция чтобы при клике вне формы тоже убирать нужный класс и форма так будет закрываться?

Такой вопрос, как сделать чтобы при клике на .prev-label  осуществлялся клик на элемент с классом owl-prev?

 

не сработало, всё равно оба можно было включить и выключить.

потому-что в примере sigma77 используются поля типа radio и свойство appearance, которое к слову работает не во всех браузерах.

 

 

А вообще что-то типо http://jsfiddle.net/9r2bnsLL/4/

Под свой дизайн вы уж сами подстраивайте.

 

А если использовать радиокнопки как подсказала sigma77 то ещё проще, скрипты вообще тогда не нужны http://jsfiddle.net/9r2bnsLL/5/

 

Спасибо, работает отлично! Пример от  sigma77  тоже работает отлично! разобрался

 

не сработало, всё равно оба можно было включить и выключить.

 

У меня всё работает )

В любом случае тут нужно использовать радио, а не чекбокс. Как стилизовать его - уже не слишком принципиально.

 

Я разобрался, всё работает отлично! Спасибо большое!

http://jsfiddle.net/9r2bnsLL/

Спасибо всё чётко работает, только с картинками теперь не получается, я сразу не учёл этого. Как теперь лейблы подогнать чтобы соответствовали картинкам ?

http://jsfiddle.net/fainz777/9r2bnsLL/3/

А в вашем случае просто достилизовать кастомную радиокнопку.

не сработало, всё равно оба можно было включить и выключить.

http://jsfiddle.net/9r2bnsLL/

для изменения картинок использую 

$('.checkbox-label').click(function(){

if($(this).hasClass('unchecked-label'))

$(this).removeClass('unchecked-label').addClass('checked-label');

else

$(this).removeClass('checked-label').addClass('unchecked-label');

});

<div class="checkbox_button">
<div class="fiz_face">
<input type="checkbox" id="box_1" >
<label for="box_1" class="checkbox-label unchecked-label"></label >
<span class="fz_uz_1">Физическое лицо</span>
</div>
<div class="ur_face">
<input type="checkbox" id="box_2" checked />
<label for="box_2" class="checkbox-label checked-label"></label>
<span class="fz_uz_2">Юридические лица</span>
</div>
</div>

.checkbox_button #box_1{
float:left;
min-width: 10px;
max-height:10px;
background: none;
}
.checkbox_button #box_2{
float:left;
min-width: 10px;
max-height:10px;
background: none;
}
.checkbox-label{
margin-left:-20px;
display: inline-block;
width: 23px;
height: 23px;
cursor: pointer;
}
.unchecked-label{
float: left;
margin-left:-20px;
background: url("../image/chekbox_1.png") no-repeat top left;
}
.checked-label{
float: left;
background: url("../image/chekbox_2.png") no-repeat top left;
}
.fz_uz_1{
float:left;
height: 23px;
display: table-cell;
vertical-align: middle;
margin-left: 5px;
font-weight: normal;
font-size: 18px;
}
.fz_uz_2{
float:left;
height: 23px;
display: table-cell;
vertical-align: middle;
margin-left: 5px;
font-weight: normal;
font-size: 18px;
}

http://joxi.ru/krDlD3zhvY3Mrp

Как сделать чтобы когда один chekbox был включен другой выключался?

 

его можно подогнать как хочешь.

Навряд ли можно будет его до такой степени подгонять.

 

Но вопрос уже неактуален, я забыл просто кодом поделиться)

 

Велосипед

 

Так точно его не подгонишь

Спасибо большое! Этот вариант работает отлично! 

я добавил ещё 

line-height: 18px;

и всё отлично работает, когда одна строка она по центру, когда две строки между ними нужный отступ.

<div class="sitebar_body"><ul><li><a href="#"><ul><li class="sb_img_1" id="p_1"></li><li class="sb_txt_1"><p>Плита безопалубочного формирования</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_2"></li><li class="sb_txt"> <p>Колонны</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_3"></li><li class="sb_txt"><p>Ригели</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_4"></li><li class="sb_txt"><p>Шахты лифтов</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_5"></li><li class="sb_txt"><p>Диафрагмы жесткости</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_6"></li><li class="sb_txt"><p>Вентиляционные шахты</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_7"></li><li class="sb_txt"><p>Фундаментальные блоки</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_8"></li><li class="sb_txt"><p>Плиты дорожные</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_9"></li><li class="sb_txt"><p>Энергобетон</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_10"></li><li class="sb_txt"><p>Товарный бетон</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_11"></li><li class="sb_txt"><p>Перемычки</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_12"></li><li class="sb_txt"><p>Строительный расствор</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_13"></li><li class="sb_txt"><p>Лестничные марши</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_14"></li><li class="sb_txt"><p>БАЛКОННЫЕ ПЛИТЫ</p></li></ul></a></li><li><a href="#"><ul><li class="sb_img" id="p_15"></li><li class="sb_txt"><p>БОРДЮРНЫЙ КАМЕНЬ</p></li></ul></a></li></ul></div>

vertical-align: middle; не срабатывает текст получается всегда сверху, если выравниваю отступом c верху то там где нзвание товара в две строки уже получается косяк. Нужно чтобы не зависимо от текста он был по центру.

bxslider попробуй bxslider.com

его можно подогнать как хочешь.

Мажет тут кто подскажет, bxslider не отображается  в Enternet Explorer 11, на прежние версии решили не ориентироваться.

Точнее не работает, обычный слайдер выложил один за другим блоки по вертикали, а карусель по горизонтали вываливает.