c# - 如何在鼠标单击时关闭 Bootstrap 警告警报？

Question

Image when 'x' is not clicked on我有一个包含 Bootstrap 警告警报的网站。当用户在下拉承运人上选择承运人时，会出现警告框。当框出现时，用户必须单击“x”以使框消失，否则，如果用户不单击“x”并选择不同的运营商，则会出现另一个警告框，就像图像中一样。如果用户点击页面上的任何地方或当用户点击“x”时，我试图让它消失。

HomeConroller.cs

   warning = ("<div class=\"alert alert-warning alert-dismissible\" role=\"alert\">
  <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button><strong>" +
   warning + "</strong></div>");

Index.cshtml//需要文件的这一部分的帮助才能在用户单击页面上的任意位置并且通知消失时正常工作。

   $(document).ready(function () {
    $(".content").click(function () {
        $(".alert").alert("close");
    });
}); 

Answer 1

您应该在选择字段更改时关闭警报，而不是在有人单击内容时关闭警报

或者当用户选择一个新的运营商时，您可以检查是否没有打开的警报，如果是，则添加一个新的。

if($(".alert").length == 0) {
    //add new alert 
}

$(function(){
  $("#carrier").change(function(){
     //Close all open alerts
     $(".alert").alert("close");
     //Add new alert here
  });
});

<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
   
    <select id="carrier">
      <option value="verizon">Verizon</option>
      <option value="tmobile">TMobile</option>
      <option value="at&t">AT & T</option>
      <option value="sprint">Sprint</option>
    </select>

    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <strong>Warning!</strong>
 Better check yourself, you're not looking too good.
    </div>