kuzyaka,
спасибо за ссылку на fancyBox3
вариант для медитации о кнопке заказать ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fancyapps.com/fancybox/source/jquery.fancybox.css">
<style type="text/css">
.fancybox-inner a{
color : #000000;
margin-bottom: 2px;
display: inline-block;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title a{
color : #FFFFFF;
}
.check{
border: 5px solid #0000FF;
}
.fancybox-nav {
margin-top: 20px;
}
.fancybox-inner a{
color: #FF0000;
}
</style>
<script type='text/javascript' src="https://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script>
$(function() {
$(".modal").fancybox({
padding: [10, 10, 35, 10],
"afterLoad": function() {
var el = this.element;
var text = "Заказать";
var add = '<a href="" >' + text + "</a>";
this.tpl.image = add + '<img class="fancybox-image" src="{href}" alt="" />'
},
"afterShow": function() {
var el = this.element;
var id = $(el).data("id");
var link = $(".fancybox-inner a, .fancybox-title a");
link.click(function(event) {
event.preventDefault();
$.fancybox.open($("#info"), {
"type": "inline",
"afterLoad": function() {
$("#text_tag_input").val(id)
},
"afterClose": function() {
$(el).trigger("click")
}
})
})
}
})
});
</script>
</head>
<body>
<a class="modal" rel="1111" title="forum" data-id="0" href="http://fancyapps.com/fancybox/demo/1_b.jpg" ><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"></a>
<a class="modal" rel="1111" title="forum" data-id="1" href="http://fancyapps.com/fancybox/demo/2_b.jpg" ><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"></a>
<div id="info" style="display: none">
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
<a href="#">text1</a>
<a href="#">text2</a>
<a href="#">text3</a>
</div>
</div>
</body>
</html>