<div id="my-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title modal-feedback">Feedback Title</h4>
<h4 class="modal-title modal-voting">Voting Title</h4>
<h4 class="modal-title modal-thanks">Thanks Title</h4>
</div>
<div class="modal-body">
<p class="modal-text modal-feedback">Feedback Text</p>
<p class="modal-text modal-voting">Voting Text</p>
<p class="modal-text modal-thanks">Thanks Text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $l__close;?></button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->$(".modal-title, .modal-text").hide();
$(".modal-thanks").show();
$("#my-modal").modal();<form> до </form>)
$(window).scroll(function(event){
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("#back-to-top").addClass("show");
} else {
$("#back-to-top").removeClass("show");
}
});
$('a[href="#top"]').on('click',function(){
$('html, body').animate({scrollTop: 0}, 'slow');
return false;
});<!-- GO TO TOP -->
<div id="back-to-top">
<a href="#top"><i class="fa fa-angle-up"></i></a>
</div>#back-to-top {
display: block;
z-index: 500;
width: 40px;
height: 40px;
line-height: 35px;
text-align: center;
font-size: 20px;
position: fixed;
bottom: -40px;
right: 20px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
background-color: #25272a;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#back-to-top i {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#back-to-top a {
width: 40px;
height: 40px;
display: block;
color: #c2cbcd;
}
#back-to-top.show {
bottom: 20px;
}
#back-to-top:hover {
background-color: #1dcfd1;
}
#back-to-top:hover i {
color: #fff;
}*{
border: solid 1px red;
}div {
border: solid 1px red;
}
span {
border: solid 1px green;
}
p {
border: solid 1px blue;
}<p><img id="largeImg-1" src="documents/works/one_one.png" alt="Large image"></p>
<ul id="thumbs-1"><p><img id="largeImg-2" src="documents/works/one_one.png" alt="Large image"></p>
<ul id="thumbs-2">#largeImg-1, #largeImg-2{
border: solid 1px #ccc;
width: 500px;
height: 350px;
padding: 5px;
margin-top: 100px;
}
.......
.......<div id="shopping-cart">
0
</div>
<a id="buy">Купить</a>
<script>
$("a#buy").on("click", function(){
$(this).preventDefault();
var quantity = parseInt( $("#shopping-cart").html() );
$("#shopping-cart").html( quantity++ );
})
</script><p>Lorem ipsum</p>
<?php
$a= 2;
echo $a * 2;
?><div id = "page">
......
</div>
<a id="new-page">Следующая страница</a>
<script>
$("a#new-page").on("click", function(){
$(this).preventDefault();
$.ajax(
url: url_обработчика на сервере, // сервер возвращает data === т.е. содержимое новой страницы
{
action: "new_page"
},
success: function( data ){
$("#page").html(data);
}
)
})
</script><?php
if ( $_POST['action'] == "new_page") {
// формируем содержимое страницы:
$page = "<p>Some content</p>";
echo $page;
}
?>