如何通过点击button来打开和closures引导警报？

我想用button单击事件多次显示一个警告框，而不必刷新页面，但警报框只显示一次。 如果我想再次显示警告框，我必须刷新页面。

目前，如果您在页面上呈现引导警报，则在closures警报时，警报的div容器将从页面中消失。 所以当你再次点击button时，它不会再显示出来。 我一直在closuresbutton上进行以下操作，使其隐藏，而不是删除警报的div容器。

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

我不知道在bootstrap中使用数据切换或数据closures可以使这种切换效果工作，而无需通过我自己的自定义Javascript处理程序。

Answer 1

我有同样的问题：只是不使用closuresbutton的data-dismissclosures和使用JQuery的show()和hide() ：

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

现在，您可以使用代码单击button时显示警报：

 $('.alert').show() 

希望这可以帮助！

Answer 2

其实你应该考虑使用这样的东西：

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

as bootstrap fade / in使用CSS3而不是Jquery hide /显示完整的Javascript。 我的观点是，在移动设备上，CSS3比Js更快。

而你的HTML应该是这样的：

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

这非常酷！ 检查它在jsFiddle =）

Answer 3

我只是使用模型variables来显示/隐藏对话框，并删除了data-dismiss =“alert”

例如

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

为我工作，并停止需要出去jQuery

Answer 4

你不需要使用jquery来完成这个，这里是一个只有bootstrap的解决scheme。

开/关button：

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

带隐藏警报的closuresbutton的警报（与单击显示/隐藏button相同）：

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

Answer 5

你可以添加.hidden类来提醒，然后点击它。 请参阅： 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"); }); 

Answer 6

你也可以试试这个：

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

它对我来说非常好。

Answer 7

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

Answer 8

显示/隐藏你可以这样做在接受的答案：

我有同样的问题：只是不使用closuresbutton的data-dismissclosures和使用JQuery的show()和hide() ：

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

现在，您可以使用代码单击button时显示警报：

 $('.alert').show() 

希望这可以帮助！

或者试图做一个可怕的警报，会让警报声震惊，并且仍然显示标题。 我这样做，所以我可以把它的position:fixed; 然后显示其他内容内容。 然而这很难做到，所以我创造了一个工作。 当你点击dismissbutton时，它会设置popup窗口display:none; 然后起初，当它在顶部，你可能需要防止它最初覆盖的内容，所以我添加了显示/隐藏与Alert的显示一致的换行符。 所以当你点击closures时，有2个提示， display:none; 然后显示只有一行内容的其他popup窗口。 当这个popup被点击时，它会设置主警报display:block; 以及正在进行的断线。 这是代码，现在完成了：

 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>