Я создал окно предварительного просмотра 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
Самый простой способ (предполагается, что вы хотите удалить элемент)
<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>
Вот обновленный FIDDLE
Ваш 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, когда другое событие происходит по вашему желанию … 🙂