在 div 中添加关闭按钮以关闭框

php javascript html

2022-08-30 12:12:36

我为输入的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

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

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