Wie wird die Bootstrap-Warnmeldung beim Mausklick geschlossen?

Question

Image when 'x' is not clicked on Ich habe eine Website, die Bootstrap-Warnmeldungen enthält. Das Warnfeld wird angezeigt, wenn der Benutzer einen Träger auf dem Dropdown-Träger auswählt. Wenn die Box angezeigt wird, muss der Benutzer auf das "x" klicken, damit die Box verschwindet. Wenn der Benutzer nicht auf "x" klickt und einen anderen Träger auswählt, erscheint eine weitere Warnmeldung wie im Bild. Ich versuche, es verschwinden zu lassen, wenn der Nutzer irgendwo auf der Seite klickt oder wenn der Nutzer auf das "x" klickt.

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 // Hilfe nötig auf diesem Teil der Datei zu arbeiten, wenn der Benutzer eine beliebige Stelle auf Seite und Benachrichtigung verschwinden klickt.

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

Answer 1

Sie die Warnung, wenn das Auswahlfeld nicht, wenn jemand auf dem Inhalt auswählt

Oder, wenn der Benutzer klickt geändert schließen sollten einen neuen Träger Sie, wenn es keine offenen Warnungen sind zu überprüfen, ob so die füge ein neues hinzu.

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>