40

入力した 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

4

8 に答える 8

66

最も簡単な方法（要素を削除すると仮定）

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

このようなもの。

于 2013-10-31T11:02:21.853 に答える
11

div コンテナーの id を使用すると簡単です: (閉じるボタン<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>
于 2013-10-31T10:55:54.640 に答える
5

この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(); 
    });
});
于 2013-10-31T11:02:53.793 に答える
4

これが更新されたフィドルです

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()ここでは、アンカーがリンクをたどらないようにするために使用しています。

于 2013-10-31T11:03:00.280 に答える
4

jQuery ソリューション: 閉じたい要素の中にこのボタンを追加します。

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

またはそれを「ただ」隠すには：

<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
于 2016-07-01T23:04:45.163 に答える
1

フィドルを更新しました: http://jsfiddle.net/xftr5/11/ 希望、すべてが明確ですか?

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

jQueryを追加し、<i>as closeトリガーを挿入しました...

于 2013-10-31T10:59:30.543 に答える