Question

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

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

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

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

Answer 1

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

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

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

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

作为bootstrap fade / in使用CSS3而不是Jquery隐藏/显示完整的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

我只是使用了一个模型变量来显示/隐藏对话框并删除了data-dismiss =＆＃34; alert＆＃34;

例如

<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的解决方案。

开/关按钮：

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box">
   <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</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课程，然后将其设为Google。请参阅：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

＆＃13;

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

＆＃13;

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

Answer 8

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

我遇到了同样的问题：只是不要使用关闭按钮中的data-dismiss并使用JQuery show()和hide()：
$('.close').click(function() {
$('.alert').hide();
  })
现在，您可以使用以下代码单击按钮时显示警告：
$('.alert').show()
希望这有帮助！

或者尝试做的是制作一个可以收缩警报但仍然显示标题的可靠警报。我做了这个，所以我可以使它position:fixed;，然后显示其他内容内容。然而，这很难做到，所以我创造了一个解决方案。单击“关闭”按钮时，它会设置弹出窗口display:none;，然后首先当它位于顶部时，您可能需要阻止它最初覆盖内容，因此我添加了根据显示屏显示/隐藏的换行符警报。因此，当您单击“忽略”时，会发出一个警告display:none;，然后显示另一个只有一行内容的弹出窗口。单击此弹出窗口时，它会将主警报设置为display:block;以及acoridance中的换行符。这是代码，现在已完成explenation：

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>

Answer 9

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

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

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

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>

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

9 个答案: