Ajout d'un bouton de fermeture dans div pour fermer la boîte
J'ai créé une boîte de prévisualisation d'URL pour l'URL entrée.
L'aperçu est affiché dans la boîte de dialogue. Je veux ajouter l'option de fermeture en haut à droite. Comment faire pour que, lorsque l'utilisateur clique dessus, la case soit désactivée.
Voici mon violon .
<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 est à l'intérieur de php
Manière la plus simple (supposons que vous vouliez supprimer l'élément)
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
Ajoutez ceci dans votre div, un exemple ici .
Vous pouvez aussi utiliser quelque chose comme ça
window.onload = function(){
document.getElementById('close').onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};
Css pour le bouton de fermeture
#close {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
Vous pouvez ajouter un effet de survol comme
#close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}
Quelque chose comme celui-ci .
c'est facile avec l'identifiant du conteneur div: (je n'ai pas placé le bouton de fermeture à l'intérieur du <a> parce que cela fonctionne correctement sur tous les navigateurs.
<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>
Voici la mise à jour VIOLON
Votre [~ # ~] html [~ # ~] devrait ressembler à ceci (j'ai seulement ajouté le bouton):
<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>
et vous devriez ajouter ce qui suit [~ # ~] css [~ # ~] :
.fragment {
position: relative;
}
#closeButton {
position: absolute;
top: 0;
right: 0;
}
Ensuite, pour que le bouton fonctionne réellement, vous devez ajouter le javascript suivant:
document.getElementById('closeButton').addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.style.display = 'none';
}, false);
Nous utilisons e.preventDefault() ici pour empêcher l'ancre de suivre le lien.
Vous pouvez utiliser ceci jsFiddle
Et [~ # ~] 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>
Avec JS (jquery required) :
$(document).ready(function() {
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
});
Une solution jQuery: Ajoutez ce bouton à l’intérieur de tout élément que vous souhaitez pouvoir fermer:
<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>
ou simplement le cacher:
<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
jQuery ("# your_div_id"). remove (); supprimera complètement les éléments correspondants du HTML DOM. Ainsi, si vous souhaitez afficher la div sur un autre événement sans actualisation, il ne sera pas possible de récupérer les éléments supprimés à moins que vous n'utilisiez AJAX.
jQuery ("# your_div_id"). toggle ("slow"); Cela pourrait également donner des résultats inattendus. Par exemple, lorsque vous sélectionnez un élément de votre div qui génère un autre div avec un bouton de fermeture (qui utilise la même fonctionnalité de fermeture que votre div précédente), il peut provoquer un comportement indésirable.
Donc, sans utiliser AJAX, une bonne solution pour le bouton de fermeture serait la suivante
HTML________________________________________________________________________
<div id="your_div_id">
<span class="close_div" onclick="close_div(1)">✖</span>
</div>
JQUERY_______________________________________________________________________
function close_div(id) {
if(id === 1) {
jQuery("#your_div_id").hide();
}
}
Maintenant, vous pouvez montrer le div, quand un autre événement se produit comme vous le souhaitez ... :-)
Mis à jour votre violon: http://jsfiddle.net/xftr5/11/ J'espère que tout est clair?
$(document).ready(function() {
$('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});
Ajout de jQuery et insertion d'un <i> comme déclencheur proche ...