2017-03-20 1 views
2

Image when 'x' is not clicked on 부트 스트랩 경고 경고가 포함 된 웹 사이트가 있습니다. 사용자가 드롭 다운 캐리어에서 운송 업체를 선택하면 경고 상자가 나타납니다. 상자가 나타나면 사용자가 상자를 보려면 '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"); 
    }); 
}); 
누군가가 내용

또는 클릭 할 때 선택 필드를 잘 작성하지 변경 될 때 당신은 경고를 닫아야합니다

답변

0

사용자는 경우에 따라서 열린 경보가없는 경우 확인할 수있는 새로운 캐리어를 선택하면 새 것을 추가하십시오.

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="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    
 
    <script data-require="[email protected]" 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>

관련 문제