Question

我的经理要我复制引导警报功能。他基本上希望保持文件内容最小化。我已经能够复制警报显示，但我不清楚如何复制本地实现中的关闭功能。我的偏好是使用尽可能接近引导程序实现的本地代码。你知道bootstrap如何连接警报的关闭按钮，以及我是否可以轻松地将此实现复制到我的本地实现中？

Answer 1

这一切都取决于你有什么。我假设你会坚持使用vanilla CSS和JS。在这种情况下，您可以执行以下操作：

＆＃13;

var alert = document.getElementsByClassName('alert')[0];

var closeButton = document.getElementsByClassName('alert-close')[0];
closeButton.onclick = function() {
  alert.style.opacity = 0;
}

＆＃13;

.alert {
  border: 1px solid black;
  opacity: 1;
  transition: opacity 0.4s;
}
.alert-header {
  background: lightgrey;
  padding: 5px;
}
.alert-close {
  float: right;
}
.alert-content {
  padding: 10px;
}

＆＃13;

<div class="alert">
  <div class="alert-header">
    <strong>Alert title</strong>
    <button class="alert-close">x</button>
  </div>
  <div class="alert-content">
    <p>
      Bacon ipsum dolor amet pork jerky tenderloin beef ribs. Meatball pork belly short ribs pastrami. Ball tip pastrami venison brisket jerky filet mignon meatloaf flank picanha pork loin chicken salami beef. Jerky chicken t-bone, tenderloin beef ribs sirloin
      pork belly beef rump kielbasa salami flank sausage ground round. Cow swine shank filet mignon fatback strip steak, salami tenderloin frankfurter flank.
    </p>
  </div>
</div>

＆＃13;

请注意，JS元素选择器应该更精确，以满足您的需求，特别是如果每页有多个警报。

如果您需要在JS中进行任何类型的复杂选择，那么我强烈推荐使用jQuery。

Answer 2

添加 jens1101 回答。

你知道如何实现对引导警报发生的关闭的淡入淡出效果吗？

transition: visibility 0s 1s, opacity 0.3s linear;会做到这一点。

＆＃13;

var alert = document.getElementsByClassName('alert')[0];

var closeButton = document.getElementsByClassName('alert-close')[0];
closeButton.onclick = function() {
    
    
	alert.style.opacity = 0;

}

＆＃13;

.alert {
  border: 1px solid black;
  transition: visibility 0s 1s, opacity 0.3s linear;
}

.alert-header {
  background: lightgrey;
  padding: 5px;
}

.alert-close {
  float: right;
}

.alert-content {
  padding: 10px;
}

＆＃13;

<div class="alert">
  <div class="alert-header">
    <strong>Alert title</strong>
    <button class="alert-close">x</button>
  </div>
  <div class="alert-content">
    <p>
      Bacon ipsum dolor amet pork jerky tenderloin beef ribs. Meatball pork belly short ribs pastrami. Ball tip pastrami venison brisket jerky filet mignon meatloaf flank picanha pork loin chicken salami beef. Jerky chicken t-bone, tenderloin beef ribs sirloin
      pork belly beef rump kielbasa salami flank sausage ground round. Cow swine shank filet mignon fatback strip steak, salami tenderloin frankfurter flank.
    </p>
  </div>
</div>

＆＃13;

如何复制bootstrap关闭警报功能？

2 个答案: