如何使此 Toast 消息在我的 Wordpresss 网站上通过点击事件工作

我正在努力在我的网站上使用吐司消息，单击按钮即可看到该消息。这是下面的代码。

<html>
<head> 
<link rel="stylesheet" href="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Snackbar / Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>

即使在函数脚本中添加事件侦听器调用也对我不起作用。我正在使用下面的库，它建议我使用上面代码中使用的外部脚本和样式。

https://codeseven.github.io/toastr/

我是新手，请帮我解决这个问题。另外，如果您能帮助我弄清楚如何直接在WordPress上完成它，那将是非常可观的。

试试这段代码...有一些小错误..我修好了...检查这个..

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Snackbar  Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：