Twitter 부트 스트랩 경고 메시지를 닫았다가 다시 엽니 다.

경고 메시지에 문제가 있습니다. 정상적으로 표시되며 사용자가 x(닫기)를 누르면 닫을 수 있지만 사용자가 다시 표시하려고하면 (예 : 버튼 이벤트 클릭) 표시되지 않습니다. (또한이 경고 메시지를 콘솔에 인쇄하면 [].) 내 코드는 다음과 같습니다.

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

그리고 이벤트 :

 $(".alert").show();

추신! 일부 이벤트 (예 : 버튼 클릭)가 발생한 후에 만 ​​경고 메시지를 표시해야합니다. 아니면 내가 뭘 잘못하고 있니?

데이터 닫기는 요소를 완전히 제거합니다. 대신 jQuery의 .hide () 메서드를 사용하십시오.

빠른 수정 방법 :

인라인 자바 스크립트를 사용하여 다음과 같이 요소 onclick을 숨 깁니다.

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

그러나 이것은 당신이 게으른 경우에만 사용해야합니다 (유지 관리 가능한 앱을 원한다면 좋지 않습니다).

올바른 방법 :

요소를 숨기기위한 새 데이터 속성을 만듭니다.

자바 스크립트 :

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

그런 다음 데이터 닫기를 마크 업에서 데이터 숨기기로 변경합니다. jsfiddle의 예 .

$("." + $(this).attr("data-hide")).hide()

이렇게하면 data-hide에 지정된 클래스의 모든 요소가 숨겨집니다. 즉 : data-hide="alert"경고 클래스가있는 모든 요소를 ​​숨 깁니다.

Xeon06 은 대체 솔루션을 제공했습니다.

$(this).closest("." + $(this).attr("data-hide")).hide()

가장 가까운 부모 요소 만 숨 깁니다. 이는 각 경고에 고유 한 클래스를 부여하지 않으려는 경우 매우 유용합니다. 그러나 경고 내에 닫기 버튼을 배치해야합니다.

jquery doc 에서 .closest 정의 :

집합의 각 요소에 대해 요소 자체를 테스트하고 DOM 트리의 상위 항목을 통해 위로 이동하여 선택기와 일치하는 첫 번째 요소를 가져옵니다.

방금 모델 변수를 사용하여 대화 상자를 표시하거나 숨기고 data-dismiss="alert"

예:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

나를 위해 일하고 jquery에 갈 필요가 없습니다.

이 문제에 대한 좋은 접근 방식은 Bootstrap의 close.bs.alert이벤트 유형을 활용 하여 경고를 제거하는 대신 숨기는 것입니다. Bootstrap이이 이벤트 유형을 노출하는 이유는 DOM에서 경고를 제거하는 기본 동작을 덮어 쓸 수 있기 때문입니다.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

knockout.js와 같은 MVVM 라이브러리를 사용한다면 (필자가 강력히 추천합니다) 더 깔끔하게 할 수 있습니다 :

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

따라서 동적 html 페이지를 처리 ​​할 수있는 솔루션을 원한다면 이미 포함되어 있으므로 jQuery의 라이브를 사용하여 현재 및 미래의 모든 요소에 핸들러를 설정하거나 제거해야합니다.

나는 사용한다

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

이것은 나를 위해 가장 잘 작동했습니다.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});

이 문제도 만났고 단순히 닫기 버튼을 해킹하는 문제는 여전히 표준 부트 스트랩 경고 닫기 이벤트에 액세스해야한다는 것입니다.

내 솔루션은 최소한의 소란으로 적절하게 구성된 Bootstrap 3 경고 (필요에 따라 닫기 버튼 포함 또는 제외)를 주입하고 상자가 닫힌 후 쉽게 다시 생성 할 수 있는 작고 사용자 정의 가능한 jquery 플러그인 을 작성하는 것이 었 습니다.

사용법, 테스트 및 예제는 https://github.com/davesag/jquery-bs3Alert 를 참조 하십시오 .

Henrik Karlsson이 게시하고 Martin Prikryl이 편집 한 답변에 동의합니다. 접근성을 기반으로 한 제안이 있습니다. .attr ( "aria-hidden", "true")를 끝에 추가하여 다음과 같이 표시합니다.

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

위의 모든 솔루션은 angular 또는 jQuery와 같은 외부 라이브러리와 이전 버전의 Bootstrap을 사용합니다. 그래서 여기 에 Bootstrap 4에 적용된 순수 JavaScript 로 된 Charles Wyke-Smith의 솔루션이 있습니다. 예, Bootstrap은 자체 모달 및 경고 코드를 위해 jQuery가 필요하지만 모든 사람이 더 이상 jQuery로 자신의 코드를 작성하는 것은 아닙니다.

다음은 경고의 html입니다.

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

처음에는 경고가 숨겨져 있으며 ( style="display: none;") 표준 대신 data-dismiss="alert"여기에서를 사용했습니다 data-hide="alert".

다음은 경고를 표시하고 닫기 버튼을 재정의하는 JavaScript입니다.

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

코드의 다른 곳에서 프로그래밍 방식으로 경고를 숨기거나 표시하려면 myAlert.style.display = 'none';또는을 수행하십시오 myAlert.style.display = 'block';.

이 문제는을 사용하여 발생합니다. Javascript로 경고 를 style="display:none"숨기 거나 적어도 표시 할 때 스타일 속성을 제거해야합니다.

다른 답변과 data-dismiss를 data-hide로 변경하는 것을 기반으로이 예제는 링크에서 경고 열기를 처리하고 경고를 반복적으로 열고 닫을 수 있도록합니다.

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});

나는 모든 방법을 시도하고 나를 위해 가장 좋은 방법은 사용하는 것입니다 내장 된 부트 스트랩 클래스 .fade및.in

예:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

참고 : jQuery에서 경고를 표시하려면 addClass ( 'in'), 숨기려면 removeClass ( 'in')하십시오.

재미있는 사실 : 이것은 모든 요소에 적용됩니다. 경고 뿐만이 아닙니다.

다음은 Henrik Karlsson 의 답변 을 기반으로 하지만 적절한 이벤트 트리거 ( 부트 스트랩 소스 기반)를 기반으로하는 솔루션입니다 .

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

대부분 저에게 대답은 메모입니다.

단순히 "컨테이너"div를 추가하고 제거 된 경고 div를 매번 다시 추가하는 것만으로는이 작업을 수행 할 수 없습니다. 나를 위해 일하는 것 같습니까?

HTML

<div id="alert_container"></div>

JS

 $("#alert_container").html('<div id="alert"></div>');          
 $("#alert").addClass("alert alert-info  alert-dismissible");
 $("#alert").html('<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Info!</strong>message');