想要实现一个网页弹窗功能,点击按钮后右下角会出现通知弹窗,可以查看通知。
前端页面代码
<!-- 通知 -->
<i class="fa fa-bell-o fa-1x" aria-hidden="true" style="color:white"></i>
<div>
<button id="show-notification-default-alert" class="btn btn-danger" th:if="true">新通知</button>
<button class="btn btn-secondary" th:if="false">暂无通知</button>
</div>
<!-- 通知 -->
<script type="text/javascript" th:src="@{/alert-resource/js/growl-notification.min.js}"></script>
<script>
GrowlNotification.setGlobalOptions({
buttons: {
action: {
text: 'Apply'
},
cancel: {
text: 'Dismiss'
}
}
});
function getOptions() {
var position = "bottom-right";
var closeTimeout = 0;
var animation = "slide";
var showButtons = false;
var showProgressBar = false;
var animationOptions = {
open: animation + '-in',
close: animation + '-out'
};
if (animation === 'none') {
animationOptions = {
open: false,
close: false
};
}
return options = {
description: 'I am a default notification',
position: position,
closeTimeout: closeTimeout,
closeWith: ['click'],
animation: animationOptions,
showButtons: showButtons,
buttons: {
action: {
callback: function (notification) {
console.log('action button');
}
}
},
showProgress: showProgressBar
};
}
$('#show-notification-default-alert').on('click', function () {
var options = getOptions();
var noticeTitle = [[${notices.title}]];
var noticeContent = [[${notices.content}]];
options.title = noticeTitle;
options.description = noticeContent;
options.width = 500;
GrowlNotification.notify(options);
});
</script>
后端代码
@RequestMapping(value = "get")
public String getNotice(Notice notice,Model model){
List<Notice> noticeList = noticeService.findList(new Notice());
model.addAttribute("notices",noticeList);
return "front/index";
}
前端页面js想要实现foreach notices对象,把它分为一个个notice,再通过弹窗显示notice.title,notice.content。
<script th:inline="javascript">
var pages = [[${user}]]; // request(后台是user)
var pages = [[${session.user}]]; // session(后台是user)
</script>
前端模板是thymeleaf
你要在后台发布接口呀,前台用ajax 方式通讯接收
就是用@RestController
不可以,必须是Map
您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632