Question

我在这里引用了一些关于按钮点击时显示和隐藏Bootstrap警报的other questions，但由于某些原因我的实现无法正常工作。我正在使用Bootstrap 4，但是，从我的初学者知识来看，事情应该仍能正常工作。

我已在dismissing alerts上引用了Bootstrap的文档，我已修改其示例以从警报中删除show类，因为我只是想在按钮单击。解雇应该可以正常工作，因为警报上的关闭按钮将从HTML实现。

HTML

<!-- Alert -->
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!-- Submit Button -->
<div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
    </div>
</div>

的JavaScript

  $(document).ready(function() {
      $("#modalButton").click(function(){
          // alert("Success!") //Test to see if the function worked, it did
      $("#buttonAlert").show() //Shows Bootstrap alert
      })
  })

因此我使用alert("Success!")对JavaScript函数进行了测试，但Bootstrap警报行$("#buttonAlert").show()没有显示任何内容？

注意我是Bootstrap和Javascript / Jquery的新手，我只是想把一些示例代码放在一起学习，所以请耐心等待。

Answer 1

你没有任何名为＆＃34; buttonAlert＆＃34;的东西。提醒require 'net/http' data = Net::HTTP.get("https://urlhere.com") data['Authorization'] = @token res = http.request(data) return res.body

id="buttonAlert"

此外，jQuery <div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert"> <strong>Success!</strong> You just showed an alert. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>无法正常工作。您需要使用show() ...

addClass('show')

DataAnnotations resource file

Answer 2

我不确定哪个是问题，我猜JQuery处理显示和隐藏的方式与bootstrap show和hide不同。

但是你可以使用Jquery $（“＃buttonAlert”）。hide（）然后用$（“＃buttonAlert”）显示它来隐藏成功消息.show（）;

$(document).ready(function() {
  $("#buttonAlert").hide()
  $("#modalButton").click(function() {
    $("#buttonAlert").show()
  })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test page</title>
</head>

<body>
  <!-- Alert -->
  <div class="alert" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
  </div>

  <!-- Submit Button -->
  <div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
  </div>
</body>

</html>

Answer 3

如果您希望它完全动态并且可以在JS中使用新模板，则如果ID为“ notification”的div可以执行类似的操作。我只是为标题传递了消息硬编码“ Success”，但您可以根据需要更改它。

它的css是这样的：

#notification {
    position: fixed;
    right: 20px;
    top: 50px;
    width: 400px;
    z-index: 999999;
}

JS代码：

const handleToastOpenAndClose = ($alert, autoCloseDelay) => {
    $alert.fadeIn();

    const fadeCall = fadingEvent => fadingEvent.slideUp(500, () => $alert.slideUp(500, () => $alert.alert('close')));
    if (autoCloseDelay) {
        var fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent));
        $alert.hover(
            () => fadingEvent.stop(),
            () => fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent))
        );
    }
};

window.toastSuccess = (message, autoCloseDelay) => {
    var html = `<div class="alert alert-success alert-dismissible hidden" role="alert">
            <div><strong>Success</strong></div>
            ${message}
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">x</span>
            </button>
       </div>`;

    $('#notification').append(html);
    var $alert = $("#notification .alert:last");
    handleToastOpenAndClose($alert, autoCloseDelay);
};

在按钮上显示Bootstrap警报单击通过Javascript / jQuery

3 个答案: