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

Posted 2023-03-05

【中文标题】我的 Bootstrap 警报在关闭后不会显示

【英文标题】：My Bootstrap alert will not display after being closed

【发布时间】：2013-12-27 23:52:12

【问题描述】：

您好，我有以下隐藏在页面上的警报

<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(); 被调用，但警报不再显示。

以前有人经历过吗？

【问题讨论】：

Possible duplicate

这能回答你的问题吗？ Twitter Bootstrap alert message close and open again

【参考方案1】：

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

例如；

<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();
    );
);

【讨论】：

我喜欢这种方法。这个想法是来自这个帖子吗？ --> ***.com/questions/13550477/…

我不得不使用："$(document).on("click", "[data-hide]", function()"。你的语法不适用，但没用也触发任何错误。知道为什么吗？

如果 Bootstrap 开箱即用地包含此功能，而不是必须添加到外部（id est，作为网站 JS 的一部分），那就太好了。

【参考方案2】：

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>

【参考方案3】：

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

【参考方案4】：

我也遇到了这个问题，上面勾选解决方案的问题是我仍然需要访问标准引导程序警报关闭事件。

我的解决方案是编写一个small, customisable, jquery plugin，它会以最少的麻烦注入一个格式正确的 Bootstrap 3 警报（根据需要使用或不使用关闭按钮），并允许您在关闭框后轻松重新生成它。

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

【参考方案5】：

更好的方法是从你的标签中删除 data-dismiss="alert" ，并使用类名，即 close 来隐藏和显示错误/警告。

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

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

[我正在处理动态添加的元素，这就是我使用“live”的原因，您可能需要根据您的要求进行更改。]

【参考方案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>

【参考方案7】：

Bootstrap 5 解决方案 --> 使用 .NET Core 5.0 测试

引导警报 HTML 代码（这些代码存储在 Razor 视图组件中）

<!-------------------------------->
<!-- INFORMATION Bootstrap Alert-->
<!-------------------------------->
<div class="alert alert-info alert-dismissible fade show bg-info" role="alert" id="bootstrapInformationAlertDiv" style="display:none;">
    <div class="custom-alert-div-information text-light font-weight-bold text-dark" id="bootstrapInformationAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapInformationAlertBtn"></button>
</div>
<!---------------------------->
<!-- SUCCESS Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-success alert-dismissible fade show bg-success" role="alert" id="bootstrapSuccessAlertDiv" style="display:none;">
    <div class="custom-alert-div-success text-light font-weight-bold" id="bootstrapSuccessAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapSuccessAlertBtn"></button>
</div>
<!---------------------------->
<!-- WARNING Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-warning alert-dismissible fade show bg-warning" role="alert" id="bootstrapWarningAlertDiv" style="display:none;">
    <div class="custom-alert-div-warning text-black font-weight-bold" id="bootstrapWarningAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapWarningAlertBtn"></button>
</div>
<!--------------------------->
<!-- DANGER Bootstrap Alert-->
<!--------------------------->
<div class="alert alert-danger alert-dismissible fade show bg-danger" role="alert" id="bootstrapDangerAlertDiv" style="display:none;">
    <div class="custom-alert-div-danger text-light font-weight-bold" id="bootstrapDangerAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapDangerAlertBtn"></button>
</div>

上面的视图组件添加在每个网页的顶部：

<!-- Bootsrap Alert View Component -->
<div>
    @await Component.InvokeAsync("BootstrapAlert")
</div>

然后我在我的项目中添加了一个小的 JS 文件 (bootstrapAlert.js)：

$("#bootstrapInformationAlertBtn").click(function () 
    event.preventDefault();
    $(this).parent().hide();
);

$("#bootstrapSuccessAlertBtn").click(function () 
    event.preventDefault();
    $(this).parent().hide();
);

$("#bootstrapWarningAlertBtn").click(function () 
    event.preventDefault();
    $(this).parent().hide();
);

$("#bootstrapDangerAlertBtn").click(function () 
    event.preventDefault();
    $(this).parent().hide();
);

在我的主 Layout.cshtml 文件中，我将脚本引用添加到上面的 js 文件中，以便它自动加载到我网站中的每个页面：

<!-- Load the js script file on each page for hiding the bootstrap alert when closed -->
<script src="~/js/bootstrap-alert-custom-scripts/bootstrapAlert.js"></script>

当调用引导警报以从我的任何 javascript 函数中打开时，我使用以下代码：

window.scrollTo(0, 0); // Scroll to the top of the page.
document.getElementById("bootstrapWarningAlertMessageDiv").innerHTML = 'Write your custom message here for the current issue / notification!';
$("#bootstrapWarningAlertDiv").show();
setTimeout(function ()  $("#bootstrapWarningAlertDiv").hide(); , 8000);

窗口滚动到命令是一个不错的小触摸，因为用户可能会向下滚动页面，如果您总是在同一个位置（即页面顶部）添加警报，那么他们不会打开时一定会看到它。