Добавить страницу в закладки браузера на jQuery

Приветствую вас, дорогие друзья! Я тоже интересовался этим вопросом, как добавить страницу в закладки браузера с помощью jQuery или Javascript. И выяснилось, что на данном этапе развития веб-технологий, это сделать невозможно. Нельзя просто так взять и начать управлять браузером пользователя. Но мы можем подтолкнуть или мотивировать на то, чтобы он сам добавил страницу вашего сайта в закладки. И сейчас разберем несколько способов.

Первый и самый простой в исполнении, это при клике по ссылке или кнопке показать всплывающий alert с текстом-предложением добавить страницу в закладки. Делается это очень просто:

HTML

1

<span class="selector">Добавить в закладки</span>

jQuery

1
2
3
4
5

$(function(){
  $('.selector').click(function(){
    alert('Нажмите сочетание клавиш Ctrl + D');
  })
});

К сожалению мы не можем изменить внешний вид стандартного сообщения браузера, но можем создать свое кастомное модальное окно и сделать его каким угодно. И это второй способ. Для начала создадим его и оформим в CSS.

HTML

1
2

<div class="modal-offer">Нажмите сочетание клавиш Ctrl + D<span>&times;</span></div>
<a class="bookmark" href="#">Добавить в закладки</a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.modal-offer {
    width: 250px;
    height: 100px;
    position: fixed;
    top: -160px;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: linear-gradient(to right, #ccc, #fdf, #ccc);
    padding: 10px;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 10px 14px 0;
}
.modal-offer span { /* Крестик закрытия окошка */
    position: absolute;
    top: -6px;
    right: 6px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
}

Обратите внимание, что position обязательно нужно указывать fixed, иначе при прокрутке страницы сообщение никто не увидит. Добавим код-обработчик.

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function(){
 $('.bookmark').click(function(){
  $('.modal-offer').animate({
    top: 10
   });
})
$('.modal-offer span').click(function(){
  $('.modal-offer').animate({
    top: '-160px'
    });
  })
});

И еще один вариант, который вы можете наблюдать в конце каждой страницы моего блога, это подмена текста по клику. тут все элементарно.

HTML

<span class="selector">Добавить в закладки браузера</span>

jQuery

1
2
3

$('.selector').click(function(){
    $(this).html('<b>Нажмите сочетание клавиш Ctrl + D</b>').css('color', 'red');
 })

Все примеры на одной странице
Демо

Теперь вы знаете как добавить страницу в закладки браузера с применением библиотеки jQuery. Все ли вам было понятно в данном материале?