需要会话脚本的帮助，只显示JQModal弹出窗口一次
Need help with a Session Script, Show JQModal Pop-up only Once
我有一个JQModal警报，需要在第一次访问客户端的网站时出现，但当从网站内部再次访问索引页时不再显示。我在设置会话cookie方面还没有走得很远，所以如果可能的话，我需要一些明确的帮助。我已经建立了一个简短的页面，上面有重要的信息来测试:URL是http://www.caycecookbook.com/pop_ups/jqm_onDocReady/code.php。我把代码附在这里。
<?php session_start();
if( $_SESSION['visited'] ){
//don't show the modal box
} else {
$_SESSION['visited'] = true;
//show modal box;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cayce CookBook</title>
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
Brice Burgess <bhb@iceburg.net> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 5%;
left: 50%;
margin-left: -265px;
width: 530px;
/*width: auto;*/
background-color:#777777;
color: #333;
border: 1px solid black;
padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#rename').jqm();
$('#rename').jqmShow(); // This is the line you need to add.
});
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;"><a href="#" class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica, verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a></p></td></tr>
</table>
</div>
</body>
</html>
你不能在PHP中明确控制js/html/css的行为。
你有两个选项
1)如果$_SESSION['visited']为true，则不包含模态框的javascript
2)从$_SESSION['visited']返回true/false到javascript代码并在那里执行逻辑操作
第一个选项的代码:
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cayce CookBook</title>
<?php
if( $_SESSION['visited'] ){
} else {
$_SESSION['visited'] = true;
?>
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
Brice Burgess <bhb@iceburg.net> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 5%;
left: 50%;
margin-left: -265px;
width: 530px;
/*width: auto;*/
background-color:#777777;
color: #333;
border: 1px solid black;
padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<?php
}
?>
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#rename').jqm();
$('#rename').jqmShow(); // This is the line you need to add.
});
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;"><a href="#" class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica, verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a></p></td></tr>
</table>
</div>
</body>
</html>
将下面的代码替换为下面的代码我更改了3个东西。
1>位置的PHP代码。我把php代码放在文件
的末尾2> Cookie而不是会话
3> javascript弹出窗口的打开代码有一些变化
如果你还有问题，请应用下面的文件，然后让我知道你的问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cayce CookBook</title>
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
Brice Burgess <bhb@iceburg.net> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 5%;
left: 50%;
margin-left: -265px;
width: 530px;
/*width: auto;*/
background-color:#777777;
color: #333;
border: 1px solid black;
padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
</head>
<body>
<script type="text/javascript">
<?php if( !isset($_COOKIE["visited"]) || $_COOKIE["visited"] != true ): ?>
$('#rename').jqm();
$('#rename').jqmShow(); // This is the line you need to add.
<?php endif; ?>
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;"><a href="#" class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica, verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a></p></td></tr>
</table>
</div>
<?php
if( !isset($_COOKIE["visited"]) || $_COOKIE["visited"] != true )
{
$expireTime = time() + (60 * 60 * 24 * 1);
// Set cookie for 1 day or 24 hour from current time
setcookie("visited", true, );
}
?>
</body>
</html>
相关文章：
- 只有当选项卡/窗口有焦点时，页面才能每5秒刷新一次
- 每个用户只显示一次放大弹出窗口
- 如何使用jQuery一次关闭多个弹出窗口
- 窗口退出时的模式弹出窗口 - 重置一次
- 每个用户仅显示一次弹出窗口
- 弹出窗口不会根据需要在每个会话中显示一次(如客户端所述）
- jQuery Slider在jQuery弹出窗口中只初始化一次
- ASP.NET:每5分钟从代码后面调用一次弹出窗口
- Bootstrap弹出窗口只出现一次
- 我想在窗口加载后只调用一次JavaScript setInterval函数
- JavaScript - 弹出窗口仅打开一次
- 让窗口在一次单击触发两个页面重定向后保持焦点
- 简单模式弹出窗口显示每个会话一次
- PHP 正在鼠标移动到窗口上执行 JavaScript.它循环在一个函数上.我怎样才能让它只执行一次
- 仅在用户登录时显示一次弹出窗口
- 编辑我的脚本并添加一个jQuery cookie以仅显示一次弹出窗口
- 窗口大小调整仅有效一次
- jQuery一次触发所有模态窗口，即使具有不同的目标 #id
- 有两个popover.同时，不应显示两个弹出窗口.一次只能看到一个popover.有可能吗
- 需要会话脚本的帮助，只显示JQModal弹出窗口一次
