Javascript 在Asp.Net Core 3 web应用程序中仅显示一次模式
我更新了我工作的一个网站,我们在主页上有一个欢迎模式。我只希望模态显示60天,只有第一次有人浏览该页面。(显然,它当前会在您移动到该页面时显示) 我可以在用户登录后添加一个声明来控制它,但是如何为未注册的基本用户添加声明呢 模式是通过窗口onload javascript事件加载的。我想应该在那里查一下日期Javascript 在Asp.Net Core 3 web应用程序中仅显示一次模式,javascript,bootstrap-modal,asp.net-core-3.0,Javascript,Bootstrap Modal,Asp.net Core 3.0,我更新了我工作的一个网站,我们在主页上有一个欢迎模式。我只希望模态显示60天,只有第一次有人浏览该页面。(显然,它当前会在您移动到该页面时显示) 我可以在用户登录后添加一个声明来控制它,但是如何为未注册的基本用户添加声明呢 模式是通过窗口onload javascript事件加载的。我想应该在那里查一下日期 <script> $(window).on('load',function(){ $('#modal-welcome').modal('show');
<script>
$(window).on('load',function(){
$('#modal-welcome').modal('show');
});
//make sure modal is in center of screen
function alignModal() {
var modalDialog = $(this).find(".modal-dialog");
/* Applying the top margin on modal dialog to align it vertically center */
modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
}
// Align modal when it is displayed
$(".modal").on("shown.bs.modal", alignModal);
// Align modal when user resize the window
$(window).on("resize", function () {
$(".modal:visible").each(alignModal);
});
</script>
$(窗口).on('load',function(){
$('modal welcome').modal('show');
});
//确保modal位于屏幕中央
函数alignModal(){
var modalDialog=$(this.find(“.modal对话框”);
/*应用“模式”对话框上的上边距使其垂直居中对齐*/
css(“margintop”,Math.max(0,($(window.height()-modalDialog.height())/2));
}
//显示时对齐模式
美元(“.modal”)。在(“所示的.bs.modal”,alignModal)上;
//用户调整窗口大小时对齐模式
$(窗口)。打开(“调整大小”,函数(){
$(“.modal:visible”)。每个(alignModal);
});
这是模态分析
<!-- Welcome Modal -->
<div id="modal-welcome" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout">
<div class="modal-content">
<div class="block block-themed block-transparent remove-margin-b">
<div class="block-header bg-primary-dark">
<ul class="block-options">
<li>
<button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title text-center">Welcome to our updated website!</h3>
</div>
<div class="block-content">
<partial name="_WelcomePartial" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-default" type="button" data-dismiss="modal">Close</button>
<button id="modal-welcome-agree" class="btn btn-sm btn-primary" type="button" data-dismiss="modal"><i class="fa fa-check"></i>Surf Away!</button>
</div>
</div>
</div>
</div>
<!-- END Terms Modal -->
-
欢迎访问我们最新的网站!
接近
冲浪吧!
您需要在页面上找到任何模态,并在每个事件周围放置一个“if not visible”(如果不可见),这样会出现一个事件:
// assuming "modal" is a class that exists on every modal
if (!$(".modal").is(":visible")) {
// event that makes a modal appear goes here
}
所以逻辑是这样的,如果没有一个模态已经可见,那么让这个模态可见。通过使用不同的术语进行一些搜索。现在有sessionStorage,它在HTML5中持续整个浏览会话。这就是路。脚本很简单
<script>
var today = new Date();
//put whatever future date you want below
var showUntil = new Date("2019-12-31");
if (sessionStorage.getItem("shown") === null) {
//show only until the end of the year
if (today < showUntil) {
$(window).on('load',function(){
$('#modal-welcome').modal('show');
sessionStorage.setItem("shown","true");
});
}
}
</script>
var today=新日期();
//把你想要的未来日期写在下面
var showthill=新日期(“2019-12-31”);
if(sessionStorage.getItem(“显示”)==null){
//仅在年底前播放
如果(今天){
$(窗口).on('load',function(){
$('modal welcome').modal('show');
sessionStorage.setItem(“显示”、“真实”);
});
}
}