我正在使用一些关于click()函数。我想用bootstrap alert类把提醒框看的很好。如何使用它。我是说我需要在哪里使用bootstrap alert类。
<script>
function goodWork(){
alert("GOOD WORK!");
}
</script>
<body>
<div class="num" "alert alert-success" id="correct" onclick="goodWork()">
3
</div>
</body>
我想我有一个可能解决你的问题。你想做的是调用一个显示bootstrap alert的函数。然而，问题是 alert() 函数只显示默认的，内置的，警报。
为了显示bootstrap警报，就像普通警报一样简单，我添加了一些javascript和一些html。
首先，我把自定义的警报放在一个 html <template> 元素。这个元素是不被浏览器渲染的。然后我创建了函数 customAlert(text). 您可以向该函数传递任何文本，它将以预定义的格式显示。这个函数还可以克隆来自于 <template> 标签，并将其添加到 <body>.
function goodWork() {
customAlert("GOOD WORK!");
//console.log("yes?");
}
function customAlert(text) {
//Get the alert from the template element
var alertBox = document.getElementById("alert").content;
//clone the alert
var cln = alertBox.cloneNode(true);
//set the message of the alert
cln.querySelectorAll("strong")[0].innerText = text;
//display the alert in the body
document.getElementsByTagName("body")[0].appendChild(cln);
}<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<html>
<body>
<p>Click on the button to display an alert:</p>
<button onclick="goodWork();">click me</button>
<template id="alert">
<div class="alert alert-success alert-dismissible fade in num">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Goodwork</strong>
</div>
</template>
</body>
</html>希望对大家有所帮助! 如果没有，请评论。