Ребятушки, миленькие, помогите, пожалуйста!
Я лузер в javascript, очень нужна помощь
Есть fancybox для Wordpress, на сайте галерея товаров, нужно добавить кнопочку "заказать сейчас" к каждой картинке в окне fancybox, чтобы по кнопочке открывалось окно с формой заказа, после закрытия формы пользователь должен возвращаться к картинке в окне fancybox и продолжить просмотр, т.е. она не должна закрываться при открытии формы.
Ссылку-кнопку добавила в Title фэнсибокса, файл jquery.fancybox.js, строка 52 (добавила в Title тег a):
d.titlePosition=="float"?'<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main"><a href="#">'+s+'</a></div></td><td id="fancybox-title-float-right"></td></tr></table>':'<div id="fancybox-title-'+d.titlePosition+'">'+s+"</div>":false;s=a;if(!(!s||s==="")){n.addClass("fancybox-title-"+d.titlePosition).html(s).appendTo("body").show();switch(d.titlePosition){case "inside":n.css({width:i.width-d.padding*2,marginLeft:d.padding,marginRight:d.padding});
Думала 2 решения:
1. Сделать отдельную страничку с формой form.php, и по ссылке в fancybox открывать ее (страничку) в отдельном всплывающем окне или в фэнсибоксе тоже. Для открытия в фэнсибоксе нужно поставить class="fancybox" для тега , ну и href указать соответственно, но это не работает, просто ничего не происходит...
Для открытия в отдельном всплывающем окне нужно использовать следующую конструкцию:
<a href="#" onclick="window.open('http://ya.ru','test', 'width=250,height=280,status=no,resizable=no,top=200,left=200'); return false;">open window</a>
Но эта строчка в коде jquery.fancybox.js не работает, выдается ошибка, в адресе сайта не воспринимаются слэши //, идут как пробелы...
Помогите, пожалуйста, мне все равно, хоть так, хоть так, главное, чтобы уже открытая картинка в фэнсибоксе не закрылась...
2. второй вариант такой:
форму сделать на самом сайте, в блоке div, невидимой, а при нажатии делать его видимым и поверх всех окон. Нашла такой код:
сама форма:
<div class="popup-window">
<p class="close">x</p>
<table><tr>
<td>Имя:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"/></td>
</tr>
</table>
</div>
форма, конечно, будет немного другая, но это не суть.
css:
<style type="text/css">
.popup-window{ //форма для заполнения
display: none;
box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
-webkit-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
-moz-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70);
padding: 20px;
background: white;
z-index: 500;
-webkit-border-radius: 5px!important;
-moz-border-radius: 5px!important;
border-radius: 5px!important;
}
.open{ //кнопка-ссылка
text-decoration: underline;
cursor: pointer;
}
.backpopup{ //тень
display:none;
width: 100%;
height: 100%;
position: fixed;
background: rgb(105, 105, 105);
opacity: 0.7;
top: 0;
left: 0;
z-index: 400;
cursor: pointer;
}
.close{ //кнопка закрытия окна
float: right;
cursor: pointer;
right: 5px;
top: 0px;
position: absolute;
padding: 4px;
}
</style>
вставляем ссылку:
<p class="open">Открыть всплывающее окно</p>
<div class="backpopup"></div>
ну и скрипт:
<script type="text/javascript">
$.fn.popup = function() { //функция для открытия всплывающего окна:
this.css('position', 'absolute').fadeIn(); //задаем абсолютное позиционирование и эффект открытия
//махинации с положением сверху:учитывается высота самого блока, экрана и позиции на странице:
this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');
//слева задается отступ, учитывается ширина самого блока и половина ширины экрана
this.css('left', ($(window).width() - this.width()) / 2 + 'px');
//открываем тень с эффектом:
$('.backpopup').fadeIn();
}
$(document).ready(function(){ //при загрузке страницы:
$('.open').click(function(){ //событие клик на нашу ссылку
$('.popup-window').popup(); //запускаем функцию на наш блок с формой
});
$('.backpopup,.close').click(function(){ //событие клик на тень и крестик - закрываем окно и тень:
$('.popup-window').fadeOut();
$('.backpopup').fadeOut();
});
});
</script>
Для этого варианта я ссылку вставила в файл jquery.fancybox.js вместо тега A, туда же добавила форму, в начало страницы (в head) добавила css, а вот сам скрипт вообще не понимаю, куда надо вставлять.
Разъясните, кто может, пожалуйста!
