Question

大家好我需要帮助（再次）。我想了解如何在点击可编辑的文本框后制作通知或提示框淡入和淡出。

这是警告框的代码：

<div class="alert alert-warning fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration:none">&times;</a>
    Alert: Please don't do this.
</div>

这是onClick的脚本：

function clicks() {
    document.getElementById("notif").innerHTML = "Hello World";
}
</script>

我在想我会将div alert box放在condition里面，或者只放一个带onClick函数的脚本

Answer 1

CodePen上的工作示例：http://codepen.io/MarkitDigital/pen/ZpEByz

HTML

<div id="alert" class="alert alert-warning fade">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Alert: Please don't do this.
</div>

<textarea id="txt"></textarea>

JS

var textarea = document.getElementById('txt');
var alert = document.getElementById('alert');

txt.addEventListener('focus', function() {
  alert.classList.add('in');

  setTimeout(function() {
    alert.classList.remove('in');
  }, 2000);
});

txt.addEventListener('blur',function (){
  alert.classList.remove('in')
});

Answer 2

我建议使用CSS方法来制作动画。即点击添加/删除一个类，让css处理动画。

但是，如果您想使用JavaScript解决方案，则此处不会更改您的代码

var myclickHandler = function() {
	// first show the alert
  $('.alert').show().fadeTo(500, 1);
  
  // Now set a timeout to hide it
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function() {
      $(this).hide();
    });
  }, 3000);
}

// start with the alert hidden
$('.alert').hide();
$('#myTextBox').on('click', myclickHandler)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-warning fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration:none">&times;</a> Alert: Please don't do this.
</div>
<input id="myTextBox" type="text" value="Click here">

如何通过单击文本字段淡入通知

2 个答案: