仅当用户登录时才显示弹出窗口

Question

我想要显示弹出窗口，当用户登录到该网站。这意味着当用户单击登录按钮时，它会重定向到下一页，此时应该会出现弹出窗口。用户能够在关闭弹出窗口后访问后台页面。当用户尝试刷新页面时，不应显示弹出窗口。但是下面的代码显示了在我的背景页面上被覆盖的HTML屏幕。

​

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

$(function() {
    $( "#dialog" ).dialog({
    	width : 710,
	 height : 410,
	 modal: true,
	 resizable: false,	 
	 draggable: false,	
    });  
  
    
  });

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> 


.ui-dialog-titlebar {
    height: 15px;
    
	}
	button {
  outline:none !important;  
}
	
html, body {
margin: 0;
padding: 0;
height: 100%;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
</head>
<body>
<div class="modal"></div>
<div id="dialog"  title=" ">
  <iframe style="position:absolute;Left:150" frameborder="0" scrolling="no" width="670" height="350" src="popUp.html" ></iframe>
</div>
</body>
</html>

​

Answer 1

捕获登录按钮单击事件，然后触发弹出窗口，如下所示

$(function() {   
  $("login-btn-id").on("click",function(){  
     $( "#dialog" ).dialog({
        width : 710,
        height : 410,
        modal: true,
        resizable: false,    
        draggable: false,   
     });  
  })
});

Answer 2

为此，您可以使用PHP会话。

当用户登录时，将打开一个会话

$_SESSION['popup']=1;

下面的代码将会起作用：

if ($_SESSION['popup']==1){

?>
<script>
$(function() {
    $( "#dialog" ).dialog({
        width : 710,
     height : 410,
     modal: true,
     resizable: false,   
     draggable: false,  
    });
</script>
<?php

$_SESSION['popup']==NULL;
}

Answer 3

问题：

由于您将在登录后将用户重定向到另一个页面，因此在这里使用登录按钮单击中的回调对您没有帮助，因此您应该使用即使在页面刷新和文档加载时也能保留状态的内容。

解决方案：

实现这一点的一种棘手方法是使用Cookie。

当用户登录并第一次打开弹出窗口时，将cookie logged设置为true，并测试此cookie是否为true不显示弹出窗口。

如果用户注销，请删除此cookie。

代码：

以下是编辑后的代码：

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

$(function() {
  var cookieValue = readCookie('logged');
  if(cookieValue !== "true"){
    $( "#dialog" ).dialog({
        width : 710,
        height : 410,
        modal: true,
        resizable: false,    
        draggable: false,   
    });
    document.cookie="logged=true";
  }
});