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

时间:2016-01-08 04:08:03

标签: javascript jquery css

我想在用户登录网站时显示弹出窗口。这意味着当用户单击登录按钮并重定向到下一页时,弹出窗口应该出现。用户能够在关闭弹出窗口后访问后台页面。当用户尝试刷新页面时,它不应显示弹出窗口。但是下面的代码显示我的背景页面上覆盖了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,	
    });  
  
    
  });
  
   
&#13;
<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%;
}
&#13;
<!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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

捕获登录按钮点击事件,然后像这样触发弹出窗口

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

答案 1 :(得分:0)

您可以使用PHP会话。

当用户登录时,您打开一个会话

$env:ChocolateyDebug

这段代码可行:

$_SESSION['popup']=1;

答案 2 :(得分:0)

<强>问题:

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

<强>解决方案:

实现这一目标的一个棘手方法是使用 Cookies

当用户登录并且您的弹出窗口第一次打开时,请将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";
  }
});