javascript - success - card overlay bootstrap




Twitter Bootstrap警報消息關閉並再次打開 (7)

問題是由於使用style="display:none" ,您應該使用Javascript隱藏警報或至少在顯示警報時刪除style屬性。

警告消息有問題。 它顯示正常,我可以在用戶按下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();

PS! 只有在發生某些事件後(例如點擊按鈕),我才需要顯示警報消息。 或者我做錯了什麼?


如果您使用的是諸如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/


我只是使用模型變量來顯示/隱藏對話框,並刪除了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


我同意Henrik Karlsson發表的,Martin Prikryl編輯的答案。 我有一個建議,基於可訪問性。 我會將.attr(“aria-hidden”,“true”)添加到結尾,以便它看起來像:

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

我認為解決這個問題的一個好方法是利用Bootstrap的close.bs.alert事件類型來隱藏警報而不是刪除它。 Bootstrap公開此事件類型的原因是,您可以覆蓋從DOM中刪除警報的默認行為。

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

所以如果你想要一個可以處理動態html頁面的解決方案,就像你已經包含了它一樣,你應該使用jQuery的live來為所有現在和將來在dom中的元素設置處理器,或者將其移除。

我用

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


根據其他答案和更改數據 - 將數據隱藏到數據隱藏,本示例處理從鏈接打開警報,並允許重複打開和關閉警報

$('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 */
   });
});




alert