Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.
Идея показалась мне интересной, и я решил поделиться способом простой реализации.
HTML
<a href="delete.html?id=2" target="_blank" onclick="return confirmDelete(this);" class="delete-link need-to-confirm">
<span class="maintext">✘ Delete</span>
<span class="confirmation">✔ Sure?</span>
</a>
Это наша кнопка-ссылка, которая куда-то ведет. На нажатие подвешен javascript-обработчик. У ссылки два класса delete-link
и need-to-confirm
. Внутри ссылки два элемента с текстом. Первый отображается с самого начала, второй становится виден после однократного нажатия.
CSS
.delete-link {
display: inline-block;
padding: 3px 5px;
border: 1px solid red;
background-color: #edbaba;
color: red;
text-decoration: none;
}
.delete-link:hover {
background-color: #fff;
}
.need-to-confirm .confirmation {
display: none;
}
.confirmed .maintext {
display: none;
}
JavaScript
var confirmDelete = (function (element) {
var className = element.className;
if (className.indexOf('need-to-confirm') > -1) {
element.className = className.replace('need-to-confirm', 'confirmed');
return false;
} else {
element.remove();
}
});
А вот и функция. В нее передается элемент, на который происходит нажатие, функция проверяет какой класс в данный момент у ссылки, если need-to-confirm
, значит пользователя нужно спросить "Уверен ли он?", в противном случае что-то сделать. В моем примере открывается новая вкладка по адресу указанному в ссылке и кнопка "Удалить" исчезает. Но легко можно добавить какой-нибудь Ajax запрос или еще что-то.
Вот пример работы.