如何复制引导关闭警报功能？

Question

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

Answer 1

这一切都取决于你有什么可用。我会假设你将坚持香草CSS和JS。在这种情况下，你可以这样做以下：

var alert = document.getElementsByClassName('alert')[0]; 
 

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

.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; 
 
}

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

请注意，JS元素选择应该更加细化，以满足您的需求，特别是如果你有每一个以上的警报页。

如果你需要在JS中做任何复杂的选择，那么我强烈推荐jQuery。

Answer 2

添加到jens1101答案。

您是否知道如何在引导警报中实现关闭时的淡入淡出效果？

transition: visibility 0s 1s, opacity 0.3s linear;会做的伎俩。

var alert = document.getElementsByClassName('alert')[0]; 
 

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

 
}

.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; 
 
}

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