Twitter 부트스트랩 경고 메시지가 닫혔다가 다시 열립니다.

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

P.S! 일부 이벤트(예: 버튼 클릭)가 발생한 후에만 경고 메시지를 표시해야 합니다.아니면 제가 뭘 잘못하고 있는 걸까요?

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

Fix-it-quick:

다음과 같이 클릭하면 인라인 Javascript를 사용하여 요소를 숨깁니다.

<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/

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

올바른 방법:

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

Javascript:

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

를 가진 즉, " 데터숨기지클모숨요깁다니소를든의스래정에된기이▁this다▁with숨깁니▁hide▁all▁specified요▁elements▁will▁data▁class-,▁in를소"입니다. 예를 들어 다음과 같습니다.data-hide="alert"경고 클래스가 있는 모든 요소를 숨깁니다.

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

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

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

jquery doc의 .close 정의:

세트의 각 요소에 대해 요소 자체를 테스트하고 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에 나갈 필요를 멈춥니다.

이 문제에 대한 좋은 접근법은 부트스트랩의 장점을 활용하는 것이라고 생각합니다.close.bs.alert이벤트 유형을 선택하여 경고를 제거하는 대신 숨깁니다.부트스트랩이 이 이벤트 유형을 표시하는 이유는 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/

이것은 나에게 가장 효과적이었습니다.

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

따라서 동적 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>

위의 모든 솔루션은 Angular 또는 jQuery의 외부 라이브러리와 이전 버전의 Bootstrap을 사용합니다.자, 여기 찰스 와이크-스미스가 부트스트랩 4에 적용한 순수 자바스크립트 솔루션이 있습니다.예, 부트스트랩은 자체 모달 및 알림 코드를 위해 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';.

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

제 해결책은 사용자 지정이 가능한 작은 jquery 플러그인을 작성하는 것이었습니다. 이 플러그인은 최소한의 번거로움으로 적절하게 형성된 Bootstrap 3 경고를 주입하고 상자가 닫힌 후 쉽게 재생성할 수 있도록 합니다.

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

저는 헨리크 칼슨이 게시하고 마틴 프리크릴이 편집한 답변에 동의합니다.접근성에 근거하여 한 가지 제안이 있습니다..attr("aria-hidden", "true")를 끝에 추가하여 다음과 같이 표시합니다.

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

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

이 예에서는 다른 답변과 데이터 거부를 데이터 숨기기로 변경하여 링크에서 알림 열기를 처리하고 알림을 반복적으로 열고 닫을 수 있습니다.

$('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에서 경고를 표시하려면 Class('in')를 추가하고, 숨기려면 Class('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>

제이에스

 $("#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');

JQuery를 사용하여 매우 간단한 방법이 있습니다.

삭제할 경우data-dismiss="alert"경보 디브에서, 당신은 단지 경보를 숨길 수 있습니다.x버튼, 클릭 이벤트 추가 및 상호 작용을 통해display경고의 css 특성입니다.

$(".close").click(function(){
   $(this).parent().css("display", "none");
});

그런 다음 다시 필요할 때마다 다음과 같이 전환할 수 있습니다.display속성을 다시 지정합니다.

전체 예:

<div class="alert alert-danger" role="alert" id="my_alert" style="display: none;">
   Uh Oh... Something went wrong
  <button type="button" class="close" aria-label="Close">
     <span aria-hidden="true">&times;</span>
  </button>
</div>

<script>
   $(".close").click(function(){
      $(this).parent().css("display", "none");
   });

   //Use whatever event you like
   $("#show_alert").click(function(){
      $("#my_alert).css("display", "inherit");
   });
<script>

언급URL : https://stackoverflow.com/questions/13550477/twitter-bootstrap-alert-message-close-and-open-again