Need help with a Session Script, Show JQModal Pop-up only Once
Question
I have a JQModal alert that needs to come up when a client's site is first accessed, but not show again when the index page is accessed again from inside the site. I'm not real far along in setting up session cookies so I'll be needing some explicit help, if that's possible. I've set up a short page with the vitals on it to test with: The URL is http://www.caycecookbook.com/pop_ups/jqm_onDocReady/code.php . I'm attaching the code here.
<?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>
2 answers
solution1
1 2011-07-11 13:26:17
You can't control js/html/css behavior explicitly from PHP.
You have two options
1) Don't include the javascript for modal box if $_SESSION['visited'] is true
2) Echo true/false from $_SESSION['visited'] to javascript code and do a logic there
Code for first option:
<?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>
solution2
0 2011-07-11 13:44:28
Replace below code in your file in below code i changed 3 things.
1> position of php code. I put php code at the end of file
2> Cookie rather than session
3> javascript popup opning code has some changes
Please apply below file after still you have some problem than let me know your prob.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery cookie pop-up to show only once per session
Laravel pop-up on session
No need to show the pop-up window after user close it
JQmodal pop up can not appear
Show PHP result in Jscript Pop-up
Pop-up doesn't show
Lightbox in php to show information in pop-up
Error messages show up in the pop-up window, how to fix?
Javascript pop-up
Show php page in javascript pop-up window
Related Tags