在div中添加关闭按钮关闭框 [英] Adding close button in div to close the box

问题描述

我为输入的网址创建了url预览框。

I have created url preview box for entered url.

预览显示在div框中。我想在右上角添加关闭选项。
如何做到这一点，以便当用户点击它框应被禁用。

Preview is shown in div box. I want to add close option on right top. How could be done so that when user click on it box should be disabled.

这是我的

Here is my fiddle.

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

code 位于 php $ b

推荐答案

最简单的方法（假设你想删除元素）

Most simple way (assumed you want to remove the element)

<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>

在 div 中添加一个<这里的例子。

Add this inside your div, an example here.

您也可以使用类似这样的

You may also use something like this

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

您可以添加悬停效果，如

You may add a hover effect like

#close:hover {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
    color:#fff;
}

类似于这一个。

这篇关于在div中添加关闭按钮关闭框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！