Question

我正在努力寻找一种方法来创建一个单击按钮时打开的警报，然后在可以设置为参数的一段时间后消失。

到目前为止，我有这个：

<script>
function myFunction() {
    alert("I will think later what to write here");
}

</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".item_add").click(function(){
        myFunction();
    });
});
</script>

我应该如何更改代码才能获得结果？

谢谢大家的帮助！

Answer 1

您需要使用HTML元素自己构建对话框。

完成此操作后，您应该检查setTimeout()，这将允许您在预设的时间段后执行某项功能 - 例如visibility:hidden您的自定义对话框。

var hideTimeout = 1000; //how many ms to wait before hiding after displaying

function customAlert() {

  //display the box
  var customAlert = document.getElementById("custom-alert-1");
  customAlert.style.visibility = 'visible';

  //set up a timer to hide it, a.k.a a setTimeout()
  setTimeout(function() {
    customAlert.style.visibility = 'hidden';
  }, hideTimeout)
}

body {
  text-align: center;
}
button {
  display: block;
  margin: 0 auto;
  margin-top: 32px;
}
.custom-alert {
  display: inline-block;
  visibility: hidden;
  background-color: #666;
  color: #fff;
  text-align: enter;
  margin: 5% auto;
  padding: 12px 48px;
}

<div id='custom-alert-1' class="custom-alert">Hello World</div>
<button onclick="customAlert()">Click to alert</button>

由于您使用的是jQuery，因此您可以将visibility切换替换为$('#custom-alert-1').fadeOut()，从而提供更精简的显示/隐藏效果。

如果你在谈论'本地'alert()那么这将无法奏效，因为JS除了弹出它之外没有任何访问权限

如何实现几秒钟后消失的警报

1 个答案: