webentwicklung-frage-antwort-db.com.de

Wie kann man einen Bootstrap-Alarm mit einem Klick ein- und ausschalten?

Ich möchte ein Benachrichtigungsfeld mehrmals mit einem Klickereignis anzeigen, ohne die Seite aktualisieren zu müssen. Das Benachrichtigungsfeld wird jedoch nur einmal angezeigt. Wenn ich das Benachrichtigungsfeld erneut anzeigen möchte, muss ich die Seite aktualisieren. 

Wenn Sie eine Bootstrap-Warnung auf der Seite rendern, wird beim Schließen der div-Container der Warnung von der Seite entfernt. Wenn Sie also erneut auf die Schaltfläche klicken, wird sie nicht mehr angezeigt. Ich habe die folgenden Schritte mit dem Schließen-Button ausgeführt, um ihn auszublenden, anstatt den div-Container der Warnung zu löschen.

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

Ich frage mich, ob die Verwendung von Data-Toggle oder Data-Domiss in Bootstrap dazu führen kann, dass diese Art von Toggle-Effekt funktioniert, ohne meine eigenen benutzerdefinierten Javascript-Handler zu verwenden. 

34
ttback

Ich hatte das gleiche Problem: Verwenden Sie einfach nicht den data-dismiss vom Schließen-Button und arbeiten Sie mit JQuery show() und hide():

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

Jetzt können Sie die Warnung anzeigen, wenn Sie auf eine Schaltfläche klicken, indem Sie den Code verwenden:

$('.alert').show()

Hoffe das hilft!

48
Ron

Eigentlich sollten Sie so etwas in Betracht ziehen:

$('#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
});

Da bootstrap fade/in CSS3 anstelle von Jquery verwendet, verstecken/zeigen Sie es in vollständigem Javascript .. __ Mein Standpunkt ist, dass auf mobilen Geräten CSS3 schneller ist als Js.

Und dein HTML sollte so aussehen:

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

Und das ist ziemlich cool! Check es in jsFiddle =)

36
Leiko

Ich habe nur eine Modellvariable verwendet, um den Dialog anzuzeigen/auszublenden, und entfernte das data-dismiss = "alert".

z.B

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

arbeitet für mich und hört auf, zu jquery zu gehen

3
user1661621

Sie müssen dazu nicht jquery verwenden. Hier ist eine reine Bootstrap-Lösung.

Die Ein/Aus-Taste:

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

Die Warnung mit einer Schließen-Schaltfläche, die die Warnung verbirgt (wie beim Klicken auf die Schaltfläche zum Anzeigen/Verbergen)

<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

Sie können die .hidden-Klasse zu Ihrer Warnung hinzufügen und sie anschließend mit Google verbinden. Siehe: 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();

});

es ist für alle Elemente verfügbar, neu hinzugefügte Elemente

0

Zum Anzeigen/Ausblenden können Sie dies wie in der akzeptierten Antwort tun:

Ich hatte das gleiche Problem: Verwenden Sie einfach nicht den data-dismiss vom Schließen-Button und arbeiten Sie mit JQuery show() und hide():

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

Jetzt können Sie die Warnung anzeigen, wenn Sie auf eine Schaltfläche klicken, indem Sie den Code verwenden:

$('.alert').show()

Hoffe das hilft!

Oder was versucht wurde zu tun, war eine zusammenklappbare Warnung, die die Warnung zusammenbricht und zum Beispiel immer noch die Kopfzeile anzeigt. Ich habe dies getan, damit ich es position:fixed; machen und dann den anderen Inhalt zeigen konnte. Dies war jedoch schwer zu erreichen, daher habe ich eine Problemumgehung erstellt. Wenn Sie auf die Schaltfläche "Deaktivieren" klicken, wird das Popup-Symbol display:none; festgelegt. Erst wenn es sich oben befindet, müssen Sie möglicherweise verhindern, dass der Inhalt anfänglich abgedeckt wird. Ich fügte Zeilenumbrüche hinzu, die in Übereinstimmung mit der Anzeige der Warnung angezeigt/verborgen würden. So 2 benachrichtigt Sie, wenn Sie auf die Schaltfläche Ablehnen klicken, display:none; und dann das andere Popup-Fenster anzeigen, das nur eine einzige Inhaltszeile enthält. Wenn dieses Popup angeklickt wird, wird der Hauptalarm auf display:block; sowie die Zeilenumbrüche in einer Spur gesetzt. Hier ist der Code, jetzt wo die Erklärung gemacht wurde:

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

Ich habe den folgenden Arbeitsansatz verwendet, der auf der Lösung von Leiko basiert. 

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

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

HTML Körper enthält unten Alarm

<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

Sie können dies auch versuchen:

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

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

});

Es hat sehr schön für mich funktioniert.

0
user1321759