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

Posted 2023-02-22

【中文标题】在div中添加关闭按钮以关闭框

【英文标题】：Adding close button in div to close the box

【发布时间】：2013-11-11 08:07:21

【问题描述】：

我为输入的 URL 创建了一个 URL 预览框。

预览显示在 div 框中。我想在右上角添加一个关闭选项。 怎么做才能在用户点击它的框时被禁用？

这是我的fiddle。

<a class="fragment" href="google.com">
    <div>
    <img src ="http://placehold.it/116x116" /> 
    <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，example here。

你也可以使用类似的东西

window.onload = function()
    document.getElementById('close').onclick = function()
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    ;
;

An Example Here.

关闭按钮的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;

类似this one。

【讨论】：

第一个建议点击后页面全部空白

为什么是三倍的parentNode？有效。但我不明白怎么做？

因为元素嵌套在三个父节点中。

【参考方案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" /> 
    <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】：

你可以用这个jsFiddle

和HTML：

<div id="previewBox">
    <button id="closeButton">Close</button>
<a class="fragment" href="google.com">
    <div>
    <img src ="http://placehold.it/116x116" /> 
    <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(); 
    );
);

【讨论】：

我在购物车页面上使用了它，但我注意到如果购物车内容被更新、某些东西被删除等，在使用 JS 更新购物车后，按钮不起作用。鉴于 JS 可能与电子商务系统发生冲突，我不完全确定我应该做什么来解决这个问题。你有什么想法？

【参考方案4】：

这是更新后的FIDDLE

您的 HTML 应该如下所示（我只添加了按钮）：

<a class="fragment" href="google.com">
    <button id="closeButton">close</button>
    <div>
        <img src ="http://placehold.it/116x116" /> 
        <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() 来防止锚点跟踪链接。

【参考方案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> 作为关闭触发器...

【讨论】：

代码可能是正确的，但我不确定 jquery 是否可用

【参考方案7】：

jQuery("#your_div_id").remove();将从 html DOM 中完全删除相应的元素。因此，如果您想在不刷新的情况下在另一个事件上显示 div，除非您使用 AJAX，否则无法取回已删除的元素。

jQuery("#your_div_id").toggle("slow"); will也可能产生意想不到的结果。例如，当您在 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，当您希望发生另一个事件时... :-)

【讨论】：

使用 onclick='$(this).parent().hide()' 或使用 onclick='$(this).parent().hide()' 或onclick='$(this).parent().remove()'?

【参考方案8】：

这就是我的做法。目标是创建一个按钮（点击让我们说另一个按钮/实体），并为其添加删除机制。我将以下脚本添加到 javascript 文件中-

        let newbtn = document.createElement("button");
        newbtn.innerHTML = 'whatever text you want the button to have';


       // the remove button
       let xspan = document.createElement('span');
       xspan.innerHTML = '<sup>X</sup>'; //this gives it superscript text
       xspan.id = 'close'; //this was not necessary but it is nice to have
       xspan.onclick = function () 
         newbtn.remove();
       ;
       newbtn.appendChild(xspan);

这对我有用。我意识到可以用更多代码替换上标，这可能会赋予它更多的内容，但这里的目标是给它一个 X 以单击。