Добавление кнопки закрытия в div для закрытия окна

Ответ 1

Самый простой способ (предполагается, что вы хотите удалить элемент)

<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;
}

Что-то вроде этого.

Ответ 2

легко с id контейнера 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>

Ответ 3

Здесь обновлено 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() здесь, чтобы предотвратить привязку якоря после ссылки.

Ответ 4

Вы можете использовать этот 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(); 
    });
});

Ответ 5

Решение jQuery: добавьте эту кнопку в любой элемент, который вы хотите закрыть:

<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>

или "просто" скрыть его:

<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>

Ответ 6

Обновлена ​​ваша скрипка: http://jsfiddle.net/xftr5/11/ Надеюсь, все ясно?

$(document).ready(function() {
    $('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});

Добавлен jQuery и вставлен <i> в качестве закрытого триггера...

Ответ 7

. 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)">&#10006</span>
</div>

JQUERY__________

function close_div(id) {
    if(id === 1) {
        jQuery("#your_div_id").hide();
    }
}

Теперь вы можете показать div, когда другое событие происходит, как вы хотите... :-)