Добавление кнопки закрытия в div для закрытия окна
Я создал окно предварительного просмотра URL-адреса для введенного URL-адреса.
Предварительный просмотр отображается в поле div. Я хочу добавить опцию закрытия справа вверху. Как можно сделать так, чтобы при нажатии пользователем на него поле должно быть отключено.
Вот моя скрипка.
<a class="fragment" href="google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
Код находится внутри php
7 answers
Самый простой способ (предполагается, что вы хотите удалить элемент)
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
Добавьте это в свой div, пример здесь.
Вы также можете использовать что-то вроде этого
window.onload = function(){
document.getElementById('close').onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};
Css для кнопки закрытия
#close {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
Вы можете добавить эффект наведения, например
#close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}
Что-то вроде этого.
Это легко с идентификатором контейнера div: (Я не поместил кнопку закрытия внутри <a>, потому что это работает правильно во всех браузерах.
<div id="myDiv">
<button class="close" onclick="document.getElementById('myDiv').style.display='none'" >Close</button>
<a class="fragment" href="http://google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
</div>
Вот обновленное СКРИПКА
Ваш HTML должен выглядеть так (я только добавил кнопку):
<a class="fragment" href="google.com">
<button id="closeButton">close</button>
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
И вы должны добавить следующий CSS:
.fragment {
position: relative;
}
#closeButton {
position: absolute;
top: 0;
right: 0;
}
Затем, чтобы кнопка действительно работала, вы должны добавить этот javascript:
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
}, false);
Мы используем e.preventDefault() здесь, чтобы запретить якорю переходить по ссылке.
Вы можете использовать этот jsfiddle
И HTML-Код:
<div id="previewBox">
<button id="closeButton">Close</button>
<a class="fragment" href="google.com">
<div>
<img src ="http://placehold.it/116x116" alt="some description"/>
<h3>the title will go here</h3>
<h4> www.myurlwill.com </h4>
<p class="text">
this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc
</p>
</div>
</a>
</div>
С JS (требуется jquery):
$(document).ready(function() {
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
});
Решение jQuery: Добавьте эту кнопку в любой элемент, который вы хотите закрыть:
<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>
Или "просто" скрыть это:
<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
Обновил вашу скрипку: http://jsfiddle.net/xftr5/11 / Надеюсь, все понятно?
$(document).ready(function() {
$('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});
Добавлен jQuery и вставлен <i> в качестве триггера закрытия...
JQuery("#your_div_id").удалить(); полностью удалит соответствующие элементы из HTML DOM. Поэтому, если вы хотите показать div на другом событии без обновления, восстановить удаленные элементы обратно будет невозможно, если вы не используете AJAX.
JQuery("#your_div_id").переключение ("медленно"); также может привести к неожиданным результатам. В качестве примера, когда вы выбираете какой-либо элемент в своем div, который генерирует другой div с кнопкой закрытия (которая использует ту же функцию закрытия так же, как и ваш предыдущий div), это может привести к нежелательному поведению.
Таким образом, без использования AJAX хорошим решением для кнопки закрытия было бы следующее
HTML-код________________________________________________________________________
<div id="your_div_id">
<span class="close_div" onclick="close_div(1)">✖</span>
</div>
JQUERY (ЗАПРОС)_______________________________________________________________________
function close_div(id) {
if(id === 1) {
jQuery("#your_div_id").hide();
}
}
Теперь вы можете показать div, когда произойдет другое событие, как вы хотите...:-)