jQuery 如何通过单击按钮打开和关闭引导程序警报？

How to toggle a bootstrap alert on and off with button click?

提问by ttback

I want to display an alert box multiple times with a button click event without having to refresh the page but the alert box only shows up once. If I want to show the alert box again, I have to refresh page.

我想通过按钮单击事件多次显示警报框，而不必刷新页面，但警报框只显示一次。如果我想再次显示警报框，我必须刷新页面。

Currently if you render a bootstrap alert on the page, when you close it, the div container of the alert is gone from the page. So when you click the button again, it doesn't show up anymore. I have been doing the following on the close button to make it hide instead of delete the div container of alert.

目前，如果您在页面上呈现引导程序警报，当您关闭它时，警报的 div 容器将从页面中消失。因此，当您再次单击该按钮时，它不再显示。我一直在关闭按钮上执行以下操作以使其隐藏而不是删除警报的 div 容器。

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

I wonder if using data-toggle or data-dismiss in bootstrap can make this sort of toggle effect working without going through my own custom Javascript handlers.

我想知道在引导程序中使用 data-toggle 或 data-dismiss 是否可以使这种切换效果工作而无需通过我自己的自定义 Javascript 处理程序。

回答by Ron

I've had the same problem: just don't use the data-dismissfrom the close button and work with JQuery show()and hide():

我遇到了同样的问题：只是不要使用data-dismiss关闭按钮并使用 JQueryshow()和hide()：

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

Now you can show the alert when clicking a button by using the code:

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

$('.alert').show()

Hope this helps!

希望这可以帮助！

回答by Leiko

Actually you should consider using something like this :

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

$('#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 uses CSS3 instead of Jquery hide/show in full Javascript. My point is that on mobile devices, CSS3 is faster than Js.

由于引导程序淡入淡出使用 CSS3 而不是 Jquery 在完整的 Javascript 中隐藏/显示。我的观点是，在移动设备上，CSS3 比 Js 快。

And your HTML should looks like this:

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

And this is pretty cool ! Check it in jsFiddle=)

这很酷！在jsFiddle 中检查它=)

回答by user1661621

I just used a model variable to show/hide the dialog and removed the data-dismiss="alert"

我只是使用模型变量来显示/隐藏对话框并删除了 data-dismiss="alert"

eg

例如

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

works for me and stops the need to go out to jquery

对我有用，不再需要去 jquery

回答by Bjorn

You don't need to use jquery to accomplish this, here's a bootstrap-only solution.

您不需要使用 jquery 来完成此操作，这是一个仅引导程序的解决方案。

The on/off button:

开/关按钮：

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

The alert with a close button that hides the alert (same as clicking the show/hide 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>

回答by Alexey

You can add .hiddenclass to you alert and then toogle it. See: JSFiddle

您可以将.hidden类添加到您的警报中，然后使用它。请参阅：JSFiddle

HTML

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

JavaScript

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

回答by Bestafiko Borizqy

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

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

});

it's available for all element, included newly element

它适用于所有元素，包括新元素

回答by Bestafiko Borizqy

To show/ hide you could do this like in the accepted answer:

要显示/隐藏，您可以在接受的答案中执行此操作：

I've had the same problem: just don't use the data-dismissfrom the close button and work with JQuery show()and hide():

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

Now you can show the alert when clicking a button by using the code:

$('.alert').show()

Hope this helps!

我遇到了同样的问题：只是不要使用data-dismiss关闭按钮并使用 JQueryshow()和hide()：

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

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

$('.alert').show()

希望这可以帮助！

Or what Was trying to do was make a colapsable alert that would colapse the alert and still show the header for example. i did this so i could make it position:fixed;and then show the other content content. However this was hard to do so i created a work around. When you click the dismiss button it would set the popup display:none;and then at first when its at the top you may need to prevent it from initially covering content so i added line breaks that would show/hide in acordance with the display of the Alert. so 2 alerts that one when you click the dismiss, display:none;and then show the other popup that has just a single line of content. when this popup was clicked it would set the main alert to display:block;as well as the line breaks in acoridance. Here is the code, now that the explenation is done:

或者尝试做的是制作一个可折叠的警报，例如折叠警报并仍然显示标题。我这样做是为了我可以制作它position:fixed;然后显示其他内容内容。然而，这很难做到，所以我创建了一个解决方法。当您单击关闭按钮时，它会设置弹出窗口display:none;，然后首先当它位于顶部时，您可能需要防止它最初覆盖内容，因此我添加了换行符，这些换行符将根据警报的显示显示/隐藏。所以当您单击关闭时 2 会提醒那个，display:none;然后显示只有一行内容的另一个弹出窗口。单击此弹出窗口时，它会将主要警报设置display:block;为 acoridance 中的换行符。这是代码，现在已经完成了解释：

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>

回答by jsa

I used the following working approach based on Leiko's solution.

我基于 Leiko 的解决方案使用了以下工作方法。

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

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

Html body contains below alert

Html 正文包含以下警报

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

回答by user1321759

You can also try this:

你也可以试试这个：

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

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

});

It worked very nice for me.

它对我来说非常好。