Question

您好，我有以下隐藏在页面上的提示

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    @TempData["selCode"]
</div>

我使用以下javascript显示它

    $('#send_reject_btn').click(function () {
        var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow');
        if (selRowIds.length > 0) {
            $('#reject_alert').show();
        } else {
            $('#selectCodeNotificationArea').show();
        }
    });

这显然与我的html中的按钮有关。

显示警报后，如果我使用<button type="button" class="close" data-dismiss="alert">×</button>关闭警报我下次按下按钮打开警报我可以看到$('#selectCodeNotificationArea').show();在我的调试屏幕中被调用，但警报没有再次显示。

以前有没有人经历过这个？

Answer 1

Data-dismiss完全删除元素。如果您打算再次显示警报，则需要隐藏警报。

例如;

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-hide="alert">&times;</button>
    @TempData["selCode"]
</div>

和这个JS

$(function(){
    $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});

Answer 2

更好的方法是从您的代码中删除data-dismiss="alert"，并使用类名，即关闭隐藏并显示错误/警告。

// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e) 
{   
    $("#add_item_err").hide();
});

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[我正在研究动态添加的元素，这就是我使用＆＃39; live＆＃39; ，您可能需要根据您的要求进行更改。]

Answer 3

Bootsrap $(selector).alert('close')（http://getbootstrap.com/javascript/#alerts）实际上删除了警告元素，因此您无法再次显示它。要实现所需的功能，只需从关闭按钮定义中删除data-dismiss="alert"属性，并添加一些小事件处理程序来隐藏警报

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
   <button type="button" class="close alert-close">&times;</button>
   @TempData["selCode"]
</div>

<script>
$(function() {
   $(document).on('click', '.alert-close', function() {
       $(this).parent().hide();
   })
});
</script>

Answer 4

我也遇到了这个问题，上面勾选解决方案的问题是我仍然需要访问标准的bootstrap alert-close事件。

我的解决方案是写一个small, customisable, jquery plugin注入一个正确形成的Bootstrap 3警报（有或没有关闭按钮，你需要它），最小的麻烦，让你在盒子关闭后轻松重新生成它

有关用法，测试和示例，请参阅https://github.com/davesag/jquery-bs3Alert。

Answer 5

实际上，引导警报旨在被删除而不是隐藏。您可以通过查看警报消息来判断它没有任何包装元素。因此，任何更改警报消息的尝试都需要额外的代码（查找文本节点元素）。您应该重新设计应用程序并在每次愿意更改/再次显示时创建新的.alert元素。

Answer 6

我使用了以下工作方法。

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

关闭后，我的Bootstrap警报不会显示

6 个答案: