web-dev-qa-db-fra.com

Comment activer et désactiver une alerte bootstrap avec un clic de bouton?

Je souhaite afficher un message d'alerte plusieurs fois avec un événement de clic de bouton sans avoir à rafraîchir la page, mais le message d'alerte ne s'affiche qu'une seule fois. Si je veux afficher à nouveau le champ d'alerte, je dois actualiser la page. 

Actuellement, si vous rendez une alerte d'amorçage sur la page, lorsque vous la fermez, le conteneur div de l'alerte disparaît de la page. Ainsi, lorsque vous cliquez à nouveau sur le bouton, il ne s'affiche plus. J'ai fait ce qui suit sur le bouton de fermeture pour le faire cacher au lieu de supprimer le conteneur div d'alerte.

<button class="close" onclick="$('#alertBox').hide();; return false;">×</button>

Je me demande si l’utilisation de data-toggle ou data-lock dans bootstrap peut faire fonctionner ce type d’effet de basculement sans passer par mes propres gestionnaires Javascript personnalisés. 

jqueryjquery-uitwitter-bootstrap
34
ttback

J'ai le même problème: n'utilisez pas le data-dismiss du bouton de fermeture et travaillez avec JQuery show() et hide():

$('.close').click(function() {
   $('.alert').hide();
})

Maintenant, vous pouvez afficher l'alerte lorsque vous cliquez sur un bouton en utilisant le code:

$('.alert').show()

J'espère que cela t'aides!

48
Ron

En fait, vous devriez envisager d'utiliser quelque chose comme ceci:

$('#the-thing-that-opens-your-alert').click(function () {
  $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});

$('.close').click(function () {
  $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

Comme bootstrap fade/in utilise CSS3 au lieu de Jquery masquer/afficher en Javascript complet ........ Mon point est que sur les appareils mobiles, CSS3 est plus rapide que Js.

Et votre code HTML devrait ressembler à ceci:

<a id="the-thing-that-opens-your-alert" href="#">Open my alert</a>

<div id="le-alert" class="alert alert-warn alert-block fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Alert title</h4>
  <p>Roses are red, violets are blue...</p>
</div>

Et c'est plutôt cool! Vérifiez-le dans jsFiddle =)

36
Leiko

Je viens d'utiliser une variable de modèle pour afficher/masquer la boîte de dialogue et supprimer le data-lic = = alert

par exemple

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria- hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

travaille pour moi et arrête le besoin de sortir à jquery

3
user1661621

Vous n'avez pas besoin d'utiliser jquery pour accomplir cela, voici une solution bootstrap uniquement.

Le bouton marche/arrêt:

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box">
   <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</button>

L'alerte avec un bouton de fermeture masquant l'alerte (revient à cliquer sur le bouton Afficher/Masquer):

<div id="my-alert-box" class="alert alert-info collapse" role="alert">
   <button type="button" class="close" data-toggle="collapse" href="#my-alert-box">
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
   </button>
   <p>Look, here's a show/hide alert box without jquery...</p>
</div>
2
Bjorn

Vous pouvez ajouter la classe .hidden à votre alerte, puis la toogle. Voir: JSFiddle

HTML

<a id="show-my-alert" href="#">Show Alert</a>

<div id="my-alert" class="alert alert-warning hidden" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">    
        <span aria-hidden="true">&times;</span>
    </button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

JavaScript

$("#show-my-alert, .close").click(function() {
    $("#my-alert").toggleClass("hidden");
});
1
Alex

$(document).on('click', '.close', function() {

   $('.alert').hide();

});

il est disponible pour tous les éléments, nouvel élément inclus

0
Bestafiko Borizqy

Pour afficher/masquer, vous pouvez le faire comme dans la réponse acceptée:

J'ai le même problème: n'utilisez pas le data-dismiss du bouton de fermeture et travaillez avec JQuery show() et hide():

$('.close').click(function() {
$('.alert').hide();
  })

Maintenant, vous pouvez afficher l'alerte lorsque vous cliquez sur un bouton en utilisant le code:

$('.alert').show()

J'espère que cela t'aides!

Ou ce que j'essayais de faire, c'était de créer une alerte pouvant être effacée et repliée, tout en affichant l'en-tête par exemple. Je l'ai fait pour pouvoir le faire position:fixed; et ensuite afficher l'autre contenu. Cependant, c'était difficile à faire, alors j'ai créé un moyen de contourner le problème. Lorsque vous cliquez sur le bouton de suppression, la fenêtre contextuelle display:none; est configurée, puis vous devez l’empêcher d’abord de l’empêcher de couvrir le contenu. C’est pourquoi j’ajoute des sauts de ligne à afficher/masquer en fonction de l’affichage de l’alerte. so 2 alerte celui-ci lorsque vous cliquez sur le licenciement, display:none;, puis que vous affichez l'autre popup qui n'a qu'une seule ligne de contenu. Lorsque cette fenêtre contextuelle était cliquée, l'alerte principale était définie sur display:block;, ainsi que les ruptures de ligne en acoridance. Voici le code, maintenant que l'explication est terminée:

function ShowALERT() { 
  document.getElementById('ALERT').style.display = "block";
	document.getElementById('ShowALERT').style.display = "none";
	document.getElementById('breakShowALERT').style.display = "none";
	document.getElementById('breakALERT').style.display = "block";
	
}
function closeALERT() { 
   document.getElementById('ALERT').style.display = "none";
document.getElementById('breakShowALERT').style.display = "block";
  document.getElementById('ShowALERT').style.display = "block";
document.getElementById('breakALERT').style.display = "none";
	
}
#ALERT {
	position:fixed;
	display:block;
	width:100%;
	z-index:1;
	left:0px;
	top:0px;
	
	}
  #ShowALERT {
position: fixed;
display:none;
z-index:1;
top:0px;
left:0px;
width: 100%;
}
#breakShowALERT {
display:none;
}
	#breakALERT {
display:block;
}
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <button id="ShowALERT"  onclick="ShowALERT()" class="bg-primary"> 

	  <h5> <b>Important Alert</b></h5>
</button>
</div>
<div class=container>
   <div id="ALERT" class="alert bg-primary alert-dismissable">
 <a href="#" class="close" onclick="closeALERT()" aria-label="close">Dismiss</a>
 <h5><b>Note:</b> Alert Content here......................</h5>
</div>
 </div>
 <body>
 <div id='breakALERT'><br><br><br><br><br></div>
					<div id='breakShowALERT'><br><br></div>
 <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
 </body>

0
user8803833

J'ai utilisé l'approche de travail suivante basée sur la solution de Leiko. 

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Corps HTML contient ci-dessous alerte

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>
0
jsa

Vous pouvez aussi essayer ceci:

$("#MyBtn").click(function() {

    if($("#MyAlrt").is(":visible")){
        $("#MyAlrt").hide();
    }else{
        $("#MyAlrt").show();
    }

});

Cela a très bien fonctionné pour moi.

0
user1321759