php 在div中添加关闭按钮以关闭框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19704477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding close button in div to close the box
提问by user123
I have created url preview box for entered url.
我为输入的 url 创建了 url 预览框。
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.
预览显示在 div 框中。我想在右上角添加关闭选项。怎么做才能在用户单击它时禁用框。
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>
codeis inside php
代码在里面php
回答by The Alpha
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>
Add this inside your div, an example here.
将其添加到您的div,示例 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 for close button
关闭按钮的 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;
}
Something like this one.
像这样的东西。
回答by Asenar
it's easy with the id of the div container : (I didn't put the close button inside the <a>because that's does work properly on all browser.
使用 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>
回答by Martin
You can use this jsFiddle
你可以使用这个jsFiddle
And HTML:
和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>
With JS (jquery required):
使用JS（需要 jquery）：
$(document).ready(function() {
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
});
回答by matewka
Here's the updated FIDDLE
这是更新的FIDDLE
Your HTMLshould look like this (I only added the button):
您的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>
and you should add the following CSS:
你应该添加以下CSS：
.fragment {
position: relative;
}
#closeButton {
position: absolute;
top: 0;
right: 0;
}
Then, to make the button actually work, you should add this javascript:
然后，要使按钮真正起作用，您应该添加以下 javascript：
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
}, false);
We're using e.preventDefault()here to prevent the anchor from following the link.
我们在e.preventDefault()这里使用以防止锚点跟随链接。
回答by patrick
A jQuery solution: Add this button inside any element you want to be able to close:
jQuery 解决方案：将此按钮添加到您希望能够关闭的任何元素中：
<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>
or to 'just' hide it:
或“只是”隐藏它：
<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
回答by pebbo
Updated your fiddle: http://jsfiddle.net/xftr5/11/Hope, everything is clear?
更新了你的小提琴：http: //jsfiddle.net/xftr5/11/希望，一切都清楚了吗？
$(document).ready(function() {
$('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});
Added jQuery and inserted an <i>as close trigger...
添加了 jQuery 并插入了一个<i>关闭触发器...
回答by Nimantha Harshana Perera
jQuery("#your_div_id").remove(); will completely remove the corresponding elements from the HTML DOM. So if you want to show the div on another event without a refresh, it will not be possible to retrieve the removed elements back unless you use AJAX.
jQuery("#your_div_id").remove(); 将从 HTML DOM 中完全删除相应的元素。因此，如果您想在不刷新的情况下在另一个事件上显示 div，则除非使用 AJAX，否则将无法检索已删除的元素。
jQuery("#your_div_id").toggle("slow"); will also could make unexpected results. As an Example when you select some element on your div which generates another div with a close button(which uses the same close functionality just as your previous div) it could make undesired behaviour.
jQuery("#your_div_id").toggle("slow"); 也会产生意想不到的结果。例如，当您在 div 上选择某个元素时，该元素会生成另一个带有关闭按钮的 div（它使用与之前的 div 相同的关闭功能），这可能会导致不受欢迎的行为。
So without using AJAX, a good solution for the close button would be as follows
所以在不使用 AJAX 的情况下，关闭按钮的一个很好的解决方案如下
HTML____________
网页版____________
<div id="your_div_id">
<span class="close_div" onclick="close_div(1)">✖</span>
</div>
JQUERY__________
J查询__________
function close_div(id) {
if(id === 1) {
jQuery("#your_div_id").hide();
}
}
Now you can show the div, when another event occures as you wish... :-)
现在您可以显示 div，当您希望发生另一个事件时... :-)
