Программирование сайтов
24 Ноя в 09:55

Модальное окно (простое)

Требуется только jQuery.
HTML:
[html]
<div class="show-popup">Показать окно</div>
<div class="lite-popup-wrapper">
<div class="fon"></div>
<div class="popup">
<div class="popup-content">Содержимое</div>
<div class="closeblock">+</div>
</div>
</div>
[/html]
CSS:
[css]
.show-popup {
cursor: pointer
}
.lite-popup-wrapper {
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index: 999;
}
.lite-popup-wrapper .fon {
background: rgba(0, 0, 0, 0.8);
position:fixed;
width:100%;
height:100%;
}
.lite-popup-wrapper .closeblock {
cursor: pointer;
position: absolute;
line-height: 44px;
font-size: 44px;
transform: rotate(45deg);
text-align: center;
top: 0;
right: 12px;
color: #333;
}
.lite-popup-wrapper .closeblock:hover {
color: #000;
}
.lite-popup-wrapper .popup {
position: relative;
width: 400px;
max-width: 100%;
padding: 40px 0 20px;
background: #00aeef;
color: #fff;
text-align: center;
font-size: 14px;
top: 50vh;
margin: -38px auto; // половина высоты окна
}
.lite-popup-wrapper .popup .popup-content {
padding: 0 15px;
}
/* Эти стили нужны, только если в окне будет форма */
.lite-popup-wrapper .popup textarea,
.lite-popup-wrapper .popup input[type=’text’],
.lite-popup-wrapper .popup input[type=’email’] {
border:0;
font:14px;
background:#fff;
padding:10px;
width:100%;
color:#000;
}
.popupform input[type=’submit’]{
cursor:pointer;
padding:5px 10px;
color:#000;
}
[/css]
JS:
[js]
$(‘.show-popup’).on(‘click’, function(){
$(‘.lite-popup-wrapper’).show();
});
$(‘.closeblock’).on(‘click’, function(){
$(‘.lite-popup-wrapper’).hide();
});
[/js]

12 Окт в 07:07

Как сделать телефон кликабельным?

Дано:
[html]
<div class="tel">8 (800) 000-00-00</div>
[/html]
Код должен быть таким:
[html]
<a href="tel:88000000000">8 (800) 000-00-00</a>
[/html]
Если нет возможности изменить код, то можно сделать так:
[js]
var tel_element = $(‘.tel’);
var tel_str = tel_element.text();
var tel_number = tel_str.replace(/[^+\d]+/g, "");
tel_element.html(‘<a href="tel:’ + tel_number + ‘">’ + tel_str + ‘</a>’);
[/js]

18 Сен в 11:02

Как обернуть элемент в тег – JavaScript

Например, обернем картинку в div с классом my-image.

[html]

<p>
<img id="photo" src="/images/photo.jpg" />
</p>

[/html]

[js]

var image_code = document.getElementById(‘photo’).parentElement.innerHTML; // получаем html код внутри родительского элемента
document.getElementById(‘photo’).parentElement.innerHTML = ‘<div class="my-image">’ + image_code + ‘</div>’;

[/js]

20 Авг в 09:26

Как перебрать HTMLCollection с помощью forEach?

HTMLCollection – это объект, ведущий себя подобно массиву. Например, чтобы получить один элемент коллекции, можно обратиться как к элементу массива по индексу:

[html]
<a href="link1">Link 1</a>
<a href="link2">Link 2</a>
[/html]

[code lang=”js”]
var links = document.getElementsByTagName(‘a’); //HTMLCollection
alert(links[0]);
[/code]

Но перебрать коллекцию как массив уже не получится:

[code lang=”js”]
links.forEach(function(link, i, links) {
alert(link);
});
[/code]

Чтобы получилось, нужно получить массив из HTMLCollection перед проходом:

[code lang=”js”]
var links_as_arr = Array.from(links);
links_as_arr.forEach(function(link, i, links_as_arr) {
alert(link);
});
[/code]

Или использовать один из следующих вариантов.

Подлиннее:

[code lang=”js”]
Array.prototype.forEach.call(links, function(link) {
alert(link);
});
[/code]

Покороче:

[code lang=”js”]
[].forEach.call(links, function(link) {
alert(link);
});
[/code]